複数レベルの深さの 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>