I had a Marionette Item view which has rendered in two places of the page. Lets take an example like Foreign Address and Local Address. As the fields are same for both the things we had used the same view just the change in header label.
We had separate save's for both of the addresses and had two entries in the DB as well. After saving we are rendering the view.
The issue is as follow
- Edit the values in the first view(Foreign address) and make some fields empty.(Normally gives errors while saving). Do not save it.
- Now edit the second view(Local address) and try to save it.
- Local address is saving but both the views are rendering which causes the Foreign view showing as empty.
I am thinking of below possibilities
- Rendering a view by its Id which generated by backbone for an view.
- Two separate views
Let me know if any solution for this issue with out separate views.
Code:
Collection View:
define(
["marionette",
"address/views/sampleAddressEmptyView",
"address/views/sampleAddressItemView",
"address/views/sampleAddressLayoutView"],
function(Marionette,
sampleAddressEmptyView,
sampleAddressItemView,
sampleAddressLayoutView){
return Marionette.CompositeView.extend({
template: "templates/sampleAddresses.hbs",
initialize: function(options){
this.mergeOptions(options,this.collections);
}
collections: ['districts'],
childView: sampleAddressItemView, //Initially I had a layout view even though I changed to item View, still both views are rendering on saving of other view
emptyView: sampleAddressEmptyView,
childViewContainer: '#addresses',
childViewOptions: function(){
return {
collection: this.collection,
districts: this.districts
};
}
});
});
LayoutView:
return Marionette.LayoutView.extend({
.
.
.
isEditable: false,
getTemplate: function() {
return this.isEditable ? 'templates/editAddress.hbs':'templates/displayAddress.hbs';
},
regions:{
districtRegion:'#districtRegion'
},
initialize:function(options){
this.mergeOptions(options,this.viewOptions);
//this.collection.models having two records
},
viewOptions: ['districts'],
onRender: function () {
if(this.isEditable === false){
return;
}else if((this.isEditable) || this.mode === 'create'){
this.renderRegions();
}
},
renderRegions: function(){
.
.
.
},
templateHelpers: {
.
.
}
ItemView:
I tried changing the above Layoutview to ItemView (Removed the regions block of layoutview), still the problem is persisting.
Let me know if I am missing any thing in code.