Consider this scenario -
There are two Marionette applications, each containing an ItemView with a template in the same region. Subsequently, instances of both ItemViews are created as follows:
<script>
ManagerMarionette1 = new Marionette.Application();
// defining the region ...
ManagerMarionette1.addRegions({
mainRegion: "#mainRegion",
});
// ItemView definition for Marionette 1
ManagerMarionette1.RegionItemView = Marionette.ItemView.extend({
template: _.template('<div class="region">Marionette 1</div>'),
onRender: function () {
this.$('.region');
}
});
ManagerMarionette2 = new Marionette.Application();
// defining the region ...
ManagerMarionette2.addRegions({
mainRegion: "#mainRegion",
});
// ItemView definition for Marionette 2
ManagerMarionette2.RegionItemView = Marionette.ItemView.extend({
template: _.template('<div class="region">Marionette 2</div>'),
onRender: function () {
this.$('.region');
}
});
...
MyMarionette1 = ManagerMarionette1.RegionItemView;
myMarionette1 = new MyMarionette1();
MyMarionette2 = ManagerMarionette2.RegionItemView;
myMarionette2 = new MyMarionette2();
</script>
The designated region is represented by -
<div id="mainRegion"></div>
There are two buttons for each of the Marionette ItemViews, which can be rendered by clicking them individually -
<button onclick="ManagerMarionette1.mainRegion.show(myMarionette1)">Show Marionette 1</button>
<button onclick="ManagerMarionette2.mainRegion.show(myMarionette2);">Show Marionette 2</button>
Initially, it may seem to work fine - each button rendering its respective ItemView. However, upon multiple clicks, one button stops rendering while the other continues to render.
How can I properly manage the Marionette applications to ensure that each button renders its respective region correctly?
Edit:
A revised version based on the suggestion from @David_Sulc can be foundhere.