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

我看到了here的一些解决方案，但我是骨干的新手。

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>

模板中的嵌套集合

2 个答案: