1

複数レベルの深さの JSON 応答データがあります。ただし、段階的なウィザード形式のページで一度にその一部を取得するだけで済みます。ウィザードの最初のステップでは、最上位オブジェクトcategory_a(オブジェクトの配列を含む) が必要であり、次のステップでは別の最上位オブジェクトcategory_bが使用されます。

各ステップで、バックボーンはいくつかのProductViewビューを作成し、 div に追加します#photo_list。各ProductViewビューはimg、配列内の要素のオブジェクトを使用します。

問題:以下に示すテンプレート ファイル (編集/改善可能) を考慮して、最上位のオブジェクトに一度に 1 つずつアクセスするにはどうすればよいですか。

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 応答から項目を追加すること) を行いましたが、すべてを 1 つのビューで行っています。参考になればと思いシェアしました。

私のテンプレートは次のようになります。

<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 に答える