1

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

ここでこれに対するいくつかの解決策を見ましたが、私はバックボーンの初心者です。

4

2 に答える 2

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/

于 2013-08-21T11:09:04.677 に答える