Mustache，遍历JSON对象

Question

我有一个JSON对象数组，现在想知道如何在Mustache.js中展示它们。这个数组的长度和内容都是可变的。

例如：

[ Object { id="1219", 0="1219", title="Lovely Book ", url= "myurl} , Object { id ="1220" , 0="1220 , title "Lovely Book2" , url="myurl2"}]

我已经尝试过：

        $.getJSON('http://myjsonurl?type=json', function(data) {
        var template = $('#personTpl').html();
        var html = Mustache.to_html(template, data);
        $('#test').html(html);

以及模板:

 <script id="personTpl" type="text/template">
TITLE: {{#data}} {{title}} IMAGE: {{image}}
<p>LINK: <a href="{{blogURL}}">{{type}}</a></p>  {{/data}} 
</script>

但是这并没有显示任何内容。

我尝试将JSON放入一个数组中，然后直接使用products[1]这样的方式访问它：

$.getJSON("http://myjsonurl?type=json", function(json) 
{
    var products = [];

    $.each(json, function(i, product)
    {           
            var product =
            {           
                Title:product.title,
                Type:product.type,
                Image:product.image             
            };

            products.push(product);
        ;       
    });     

    var template = "<h1>Title: {{ Title }}</h1> Type: {{ Type }} Image : {{ Image }}";


    var html = Mustache.to_html(template, products[1]);
    $('#json').html(html);                      

}); 

这将显示一条记录，但我如何迭代它们并显示所有记录？

- BobFlemming

---

如果对象数组的内容是可变的，那么它似乎不适合作为模板。 - maxbeatty

Answer 1

您需要一个单一的JSON对象，其格式如下：

var json = { id:"1220" , 0:"1220", title:"Lovely Book2", url:"myurl2" };
var template = $('#personTpl').html();
var html = Mustache.to_html(template, json);
$('#test').html(html);

所以这样的代码应该能够运行:

$.getJSON('http://myjsonurl?type=json', function(data) {
var template = $('#personTpl').html();
$.each(data, function(key,val) {

        var html = Mustache.to_html(template, val);
        $('#test').append(html);
});

});

- StuR

---

啊，我没意识到 Mustache 渲染必须在 each 中。谢谢！ - BobFlemming

在循环中渲染Mustache模板是相当低效的。 - maxbeatty

True。上面的回答回答了OP的问题，但远非高效。更好的方法是传递例如{array：[{title：'one'}，{title：'two'}]}，然后您可以在模板中使用它们，例如{{#array}}<h1>{{title}}</h1>{{/array}}。 - StuR

Ruby实现曾经支持隐式区块；也就是说，如果渲染上下文是一个数组而不是一个对象，它会自动循环遍历上下文并为每个元素渲染模板。我不确定它是否仍然支持这个功能，但这是一个方便的特性 :) - bobthecow

Answer 2

为了让您的模板按照您的要求正常工作，您的JSON需要像这样：

{
  "data": [
    { "id":"1219", "0":"1219", "title":"Lovely Book ", "url": "myurl"},
    { "id":"1219", "0":"1219", "title":"Lovely Book ", "url": "myurl"},
    { "id":"1219", "0":"1219", "title":"Lovely Book ", "url": "myurl"}
  ]
}

- Amin Eshaq

Answer 3

这应该可以消除需要执行每个语句的必要性。

var json = { id:"1220", 0:"1220", title:"Lovely Book2", url:"myurl2" };
var stuff = {stuff: json}; 
var template = $('#personTpl').html();
var html = Mustache.to_html(template, stuff);
$('#test').html(html);

在您的模板中，可以通过以下方式来循环处理内容：

<script id="personTpl" type="text/template">
{{#stuff}}
   TITLE:  {{title}} IMAGE: {{image}}
   <p>LINK: <a href="{{blogURL}}">{{type}}</a></p>  
{{/stuff}} 
</script>

- mogetutu