マルチステップウィザードにProductListView
複数の子ビューを含む親ビューがあります。ProductView
ユーザーがをクリックするとProductView
、そのモデルのIDがどこかに(場合によっては配列に)格納され、処理のためにサーバー側に送り返されるようにする必要があります。
問題:ユーザーがクリックしたのをid
どこに保存すればよいですか?ProductView
親ビューに保存しようとしましたが、子ビューから親ビューProductListView
の配列にアクセスできないようです。selectedProducts
ProductView
これは正しいアプローチですか?これはどのように行う必要がありますか?
モデル
ProductCollection = Backbone.Collection.extend({
model: Product,
url: '/wizard'
});
親ビュー
ProductListView = Backbone.View.extend({
el: '#photo_list',
selectedProducts: {}, // STORING SELECTED PRODUCTS IN THIS ARRAY
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',
events: {
'click': 'toggleSelection'
},
template: _.template($('#tpl-PhotoListItemView').html()),
render: function() {
this.$el.html(this.template( this.model.toJSON() ));
return this;
},
// ADDS ITS MODEL'S ID TO ARRAY
toggleSelection: function() {
this.parent.selectedProducts.push(this.model.id);
console.log(this.parent.selectedProducts);
}
});