Вложенная коллекция в шаблоне

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

Попробуйте это:

<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> 

Answer 2

Как есть, ваш атрибут 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/