使用Backbone.js访问JSON响应的部分

Accessing parts of a JSON response using Backbone.js

本文关键字：响应 JSON Backbone js 访问 使用      更新时间：2023-09-26

我有一些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>

我也做过类似的事情（从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>

然后，在我视图的initialize函数中，我只需要传递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 });
});
相关文章：