Web サイトのバックボーンを使用してショッピング バッグ ビューをレンダリングする際に問題があります。
すべてのバッグ ビューに 1 つのコレクションを使用しています (アイテム リストの「Quick_View」とアイテム リストの「Normal_View」)。また、両方のビューで各アイテムをレンダリングするために使用される「Item_View」も作成しました。
これは SPA (Single Page Application) であり、「Quick_View」はすべてのバックボーン ルートに対して開始およびレンダリングされ、デフォルトでは非表示になっています。ユーザーが、表示されているページから「Quick_View」リンクをクリックするたびに。そのためのルートは定義されていません。
「Normal_View」には、「Quick_View」にあるチェックアウト ボタンを使用してアクセスできます。「ドメイン/チェックアウト」ルートでバインドされます。
「Quick_View」チェックボタンから「Normal_View」にアクセスすると、正常に動作し、両方の (クイックとノーマル) ビューが同期しています。つまり、いずれかのビューのアイテムを追加、削除、更新すると、それに応じて両方のビューが更新されます。
しかし、新しいブラウザーで「ドメイン/チェックアウト」ルートに直接アクセスすると、両方のビューが正常にレンダリングされますが、同期されません。つまり、1 つのビューを変更しても、別のビューは更新されません。
私が追跡した理由は、「Quick_View」を介して「Normal_View」にアクセスすると、両方のビューの各アイテムのモデルが同じ CID を持つため、いずれかからモデルに変更があった場合、両方のビューが同期するためです。意見。
また、「Normal_View」に直接アクセスすると、両方のビューの各アイテムのモデルが同じ CID を持っていないため、期待どおりに動作しません。
さらに考慮すべき点がいくつかあります。
- コレクションは「Quick_View」のリセット イベントを 2 回発生させ、「Quick_View」の各アイテムは 2 回レンダリングされます。
- 「Normal_View」にアクセスすると(どちらの方法でも)、「Quick_View」は再びレンダリングされますが、「Normal_View」のレンダリングは終了します。
// メイン ビュー
var mainView = Backbone.View.extend({
el: 'body',
template: {
header: Handlebars.compile(headerTemplate),
mainNav: Handlebars.compile(mainNavtemplate),
footer: Handlebars.compile(footerTemplate)
},
initialize: function() {
_.bindAll();
AW.collection.bag = new bagCollection();
//AW.collection.bag.fetch({reset:true});
},
render: function() {
this.$el.html(this.template());
this.loadSubView('bagQV');
},
loadSubView: function(subView) {
switch(subView) {
case 'home' :
if(!AW.view.home) AW.view.home = new homepageView();
AW.view.home.render();
break;
case 'bagQV' :
if(!AW.view.bagQV) AW.view.bagQV = new bagQuickView({collection: AW.collection.bag});
//AW.view.bagQV.render();
break;
case 'checkout' :
if(!AW.view.checkout) AW.view.checkout = new checkoutView({collection: AW.collection.bag});
AW.view.checkout.render();
break;
}
}
});
// 単一アイテム ビュー
var bagItemView = Backbone.View.extend({
tagName: 'tr',
template: Handlebars.compile(bagItemTemplate),
initialize: function() {
_.bindAll(this);
this.listenTo(this.model, 'change', this.render);
this.listenTo(this.model, 'remove', this.removeItem);
$(document).on('keyup', this.listenKeyboard);
},
events: {
'click .qtyInput .button' : 'updateItem',
'click .controls a.remove' : 'removeModel'
},
render: function() {
this.$el.html(this.template(this.model.toJSON()));
this.$el.attr('data-id',this.model.cid);
return this;
},
updateItem: function(e) {
e.preventDefault();
e.stopPropagation();
var newQty = this.$el.find('.qtyInput input').val();
var newAmt = newQty * parseFloat(this.model.get('prodRate').replace('$',''));
this.model.set({prodQty: newQty, amount: '$' + newAmt});
this.cancelEdit(e);
},
removeModel: function(e) {
e.preventDefault();
e.stopPropagation();
if(AW.collection.bag) AW.collection.bag.remove(this.model);
},
removeItem: function() {
this.$el.remove();
}
});
// バッグのクイック ビュー
var bagQuickView = Backbone.View.extend({
tagName: 'div',
id: 'myBagQV',
template: Handlebars.compile(bagQuickViewTemplate),
initialize: function() {
_.bindAll(this);
this.collection.fetch({reset:true});
//this.collection.bind("reset", _.bind(this.render, this));
this.listenTo(this.collection, 'add', this.addItem);
this.listenTo(this.collection, 'reset', this.render);
},
render: function() {
if($('#myBagQV').length == 0) {
this.$el.html(this.template());
$('body').append(this.el);
}
this.addAllItems();
return this;
},
addItem: function(item) {
var parent = this;
var itemView = new bagItemView({model: item});
$('#itemsInBag table tbody').append(itemView.render().el);
},
addAllItems: function() {
if(this.collection.length > 0) {
$('#itemsInBag table tbody').html('');
this.collection.each(this.addItem, this);
}
},
});
// 通常のバッグ ビュー
var bagView = Backbone.View.extend({
tagName: 'div',
id: 'myBag',
template: Handlebars.compile(checkoutBagTemplate),
initialize: function() {
_.bindAll(this);
this.collection.fetch({reset:true});
//this.collection.bind("reset", _.bind(this.render, this));
this.listenTo(this.collection, 'add', this.addItem);
this.listenTo(this.collection, 'reset', this.render);
},
render: function() {
this.$el.html(this.template());
$('#checkoutContainer #details').append(this.el);
this.addAllItems();
return this;
},
addItem: function(item) {
var parent = this;
var itemView = new bagItemView({model: item});
this.$el.find('table tbody').append(itemView.render().el);
},
addAllItems: function() {
if(this.collection.length > 0) {
this.$el.find('table tbody').html('');
this.collection.each(this.addItem, this);
}
}
});
あなたの助けを探しています。前もって感謝します
乾杯、ヴィクラム