如何为具有嵌套对象的 JSON 数据创建 Mustache 模板

Question

>我有这个JSON数据

    [
      {
         "item":{
            "name":"some name",
            "description":" someDescription ",
            "price":"6",         
            "image_url":"url"
         },
         "options":[
         ]
      },
       {
         "item":{
            "name":"some name",
            "description":" someDescription ",
            "price":"6",         
            "image_url":"url"
         },
         "options":[
         ]
      }
]

我的代码是

<script id="itemtpl" type="text/template">
{{#items}}
        {{#item}}
        <div class ="item"> 
            <img src = "{{image_url}} alt="Photo of {{menu_item_name}}"/>
            <h3>{{menu_item_name}}</h3>
            <h4>{{menu_item_price}}</h4>
            <p>{{menu_item_description}}</p>
        </div>
        {{/#item}}
{{/items}}
</script>

<script type ="text/javascript">
$(function(){
    $.getJSON('fullmenu.json', function(data) {
            var template = $('#itemtpl').html();
            var html = Mustache.to_html(template, data);
            $('#menu').html(html);
    });//getJSON
});//function
</script>

我正在使用JavaScript和胡子模板来显示所有项目及其名称，描述和图片。但是我在通过嵌套数组访问时遇到问题。如何检索这些嵌套值？

Answer 1

如果你想遍历一个顶级数组，你应该把它称为{{#.}}。{{./}}你也有一些错别字，看，这就是你的模板的工作方式：

{{#.}}
        {{#item}}
        <div class ="item"> 
            <img src = "{{image_url}} alt="Photo of {{name}}"/>
            <h3>{{name}}</h3>
            <h4>{{price}}</h4>
            <p>{{description}}</p>
        </div>
        {{/item}}
{{/.}}