Rendering 2 views using single collection in Backbone - backbone.js

Question

I am facing issue while rendering 2 views using single collection in Backbone.
In my app, there is a Main View, in which I am initializing Items Collection, so it can be accessible to all children views.
There is an Item View, which is being used to render single item in both the Views (Quick and normal) whenever any item is added to the collection.
Quick View has to be render for all the Routes of the App. Whereas, Normal view will rendered only domain/checkout route called. Domain/checkout can be called in 2 ways:
Click on checkout button – in this case, both are in sync and working fine.
Access domain/checkout Path directly – in this case, Quick and Normal views are not in sync.
// Main View
var mainView = Backbone.View.extend({
el: 'body',
template: {
header: Handlebars.compile(headerTemplate),
mainNav: Handlebars.compile(mainNavtemplate),
footer: Handlebars.compile(footerTemplate)
},
initialize: function() {
_.bindAll(this);
AW.collection.bag = new bagCollection();
AW.collection.bag.fetch({reset:true});
},
render: function() {
this.$el.html(this.template());
this.loadSubView('bagQV');
}
});
// Quick View
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;
}
});
// Normal View
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;
}
});