json - 模板中的嵌套集合

Question

我需要访问 JSON 数据中的嵌套对象。

这是我的 JSON：

[
    {
        "title": "Kategory 1",
        "id": 1,
        "products": [{ "name" : "Product 1"},{"name" : "Product 2"},{"name" : "Product 3"}]
    },
    {
        "title": "Kategory 2",
        "id": 2,
        "products": [{ "name" : "Product 4"},{"name" : "Product 5"}]
    }

]

收藏 ：

var Categories = Backbone.Collection.extend({
    url: 'api/categories.json'
});   

看法 ：

var CategoriesView = Backbone.View.extend({ 
    initialize:function () {
    this.render();
},

render:function () {
    var that = this;        
    var categories = new Categories();        
    categories.fetch({
        success: function (categories) {            
        var template = _.template($('#categories-template').html(), {categories: categories.models});           
          that.$el.html(template);
        }
    })
}             
});

模板 ：

<script type="text/template" id="categories-template">        
    <% _.each(categories, function(category) { %>

        <li class="categorycls"><%= category.get('title') %></li>
        <li class="productscls"><%= category.get("products") %>  

    <% }); %>                     
</script>

所以我的 HTML 现在看起来像：

Kategory 1

[object Object],[object Object],[object Object]

Kategory 2

[object Object],[object Object]

我正在尝试像这样呈现每个产品名称：

Kategory 1

Product 1
Product 2
Product 3

Kategory 2

Product 4
Product 5

我在这里看到了一些解决方案，但我是骨干新手。

Answer 1

照原样，您的products属性是一个数组，可用于提供嵌套模板。例如，

<% _.each(categories, function(category) { %>

    <li class="categorycls"><%= category.get('title') %></li>
    <li class="productscls">
        <% _.each(category.get("products"), function(product) { %>
            <%= product.name %>
        <% }); %>
    </li>
<% }); %>

还有一个演示http://jsfiddle.net/nikoshr/htcbb/

Answer 2

尝试这个：

<script type="text/template" id="categories-template">        
    <% _.each(categories, function(category) { %>

        <li class="categorycls"><%= category.get('title') %></li>
        <%  _.each(category.get("products"), function(product) { %>  
        <li class="productscls"><%= product.name %></li>
        <% }); %>
    <% }); %>                     
</script>