I have a module called GridView in which i extend Marionette.ItemView like given below:
GridView.View = Marionette.ItemView.extend({
template: "#grid-view-template",
showGrid: function(gridName) {
....
},
....
}
Whenever a grid is to be displayed the caller extends GridView and invokes the showGrid method with a parameter (as given below)
//Module A code
var View = GridView.View.extend({
});
....
someregion.view.showGrid("GridA");
//Module B code
var View = GridView.View.extend({
});
....
someOtherregion.view.showGrid("GridB");
The problem is that when i show Grid A first and then click (on some menu) to show Grid B, i get a blank screen. If i come back to Grid A it shows the grid. If i show Grid B first, it shows the Grid but get a blank screen when Grid A is clicked. (i.e is only shows the grid which is invoked first). I can always go back to the grid that is shown first and is shows :-(
In a moment of frustration i did the following:
a) Removed the template from GridView
b) Added the template to each module
If I do this, it works as expected (code snippet below)
GridView.View = Marionette.ItemView.extend({
//template: "#grid-view-template", (COMMENTED OUT)
showGrid: function(gridName) {
....
},
....
}
//Module A code
var View = GridView.View.extend({
template: "#gridA-template",
});
....
view.showGrid("GridA");
//Module B code
var View = GridView.View.extend({
template: "#gridB-template",
});
....
view.showGrid("GridB");
When each View that extends GridView has its own template all works well - would appreciate it if someone could shed some light on this.
While this works for me, its a pain since each module that needs to show a grid needs to define its own template with a different ID The template itself is pretty simple
<div id="grid-view-div3"></div>
thanks in advance
-joseph
