1

我有一些深度多层次的 JSON 响应数据。但是，我只需要在一步一步的向导样式页面中随时检索其中的一部分。在向导的第一步中，需要一个顶级对象category_a（其中包含一个对象数组），在下一步中，将使用另一个顶级对象category_b，依此类推。

在每一步，主干都会创建几个ProductView视图并附加到一个 div #photo_list。每个ProductView视图都将使用img数组中元素的对象。

问题：我应该如何一次访问一个顶级对象，给定下面显示的我的模板文件（可以编辑/改进），我试图使其尽可能简单。

示例 JSON 响应

对象名称category_a和对象数量可能会有所不同

{"category_a":[
    {"product_id":6283,
    "img":"http:\/\/www.mysite.com\/img\/6283_5e093.jpg"},

    {"product_id":6284,
    "img":"http:\/\/www.mysite.com\/img\/6284_5e093.jpg"}
    ],

"category_b":[
    {"product_id":6283,
    "img":"http:\/\/www.mysite.com\/img\/6283_5e093.jpg"},

    {"product_id":6284,
    "img":"http:\/\/www.mysite.com\/img\/6284_5e093.jpg"}
    ]
}

Backbone.js 代码

productList当前包含整个 JSON 响应

ProductCollection = Backbone.Collection.extend({
    url: '/api/someurl',
    model: Product
});

ProductListView = Backbone.View.extend({
    el: '#photo_list',

    initialize: function() {
        this.collection.bind('reset', this.render, this);
    },

    render: function() {
        this.collection.each(function(product, index){
            $(this.el).append(new ProductView({ model: product }).render().el);
        }, this);
        return this;
    }
});

ProductView = Backbone.View.extend({
    tagname: 'div',
    className: 'photo_box',

    template: _.template($('#tpl-PhotoListItemView').html()),

    render: function() {
        this.$el.html(this.template( this.model.toJSON() ));
        return this;
    }
});

创建集合+视图

this.productList = new ProductCollection();
var self = this;
self.productListView = new ProductListView({ collection: self.productList });
this.productList.fetch();

模板片段

<div class="photo_container">
    <img src="<%= img %>" class='photo' />
</div>
4

1 回答 1

1

我已经做了类似的事情（从 JSON 响应中附加项目），但我在一个视图中完成了这一切，这可能会或可能不会满足您的需求。以为我会分享以防万一它有帮助。

我的模板如下所示：

<div id="folders" data-role="content">
    <div class="content-primary">
        <ul data-role="listview" id="foldersListView" data-filter="true">
        <!-- insert folders here -->
        <% for (var i = 0; i < folders.length; i++) { %>
            <% var folder = folders[i]; %>
            <li id=<%= folder.displayName %>><h3><%= folder.displayName %></h3><span class="ui-li-count"><%= folder.count %></span><ul></ul></li>
        <% } %>
        <!-- done inserting -->
        </ul>
    </div>
</div>

然后在我的视图的初始化函数中，我只需传递 JSON 对象，模板将为我逐步完成每个项目。

initialize : function() {
    _.bindAll(this, "render", "logoutAction");
    this.template = _.template($("#folders").html(), { folders : app.folders.toJSON() });
    // Add the template HTML to the body.
    $(this.el).html(this.template);
},

在分享了所有这些之后，我认为对您来说更简单的解决方案可能是在创建视图时逐步浏览每个项目。

this.productList = new ProductCollection();
var self = this;
productListJSON = self.productList.toJSON()
$.each(productListJSON, function(product) {
    new ProductListView({ product: productListJSON[product].product });
});
于 2012-08-31T16:58:40.433 回答