Mustache ，遍历 JSON 对象答案

【问题标题】：Mustache , iterating over JSON objectsMustache ，遍历 JSON 对象
【发布时间】：2012-03-12 17:37:57
【问题描述】：

我有一个 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);                      

});

这会很好地显示一条记录，但我怎样才能遍历它们并显示全部？

【问题讨论】：

如果对象数组的内容可以变化，那么它听起来不太适合模板

标签： javascript jquery mustache

【解决方案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);
});

});

【讨论】：

啊，没有意识到 Mustache 渲染必须在 each 中。谢谢！
在这样的循环中渲染 Mustache 效率很低
是的。以上回答了OP的问题，但远非有效。更好的是通过例如{ array: [ { title: 'one' }, { title: 'two' } ] } 然后您可以在模板中使用它们，例如：{{#array}}
{{title}}
{ {/array}}
Ruby 实现（在某一时刻）支持隐式部分；也就是说，如果渲染上下文是一个数组而不是一个对象，它将自动循环上下文并为每个元素渲染一次模板。我不确定它是否仍然支持这个，但它是一个方便的功能:)

【解决方案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"}
  ]
}

【讨论】：

【解决方案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>

【讨论】：