Marionette View - unable to reuse template - marionette

Question

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

Answer 1

Having a template in the base class and then extending views off it is definitely possible, as long as your subviews all use the same template. If the templates need to be slightly different ( not sure if you can change this ) then you can keep your base class, have and then in each subview, specify which template to use, like you are doing.
If there is a way to you to make a more general template and have all grids ( A, B, or C, ) use the same div ( from your template), then your first solution should work... it sounds like, while your putting the grid into the correct div that your template provides for module A with showGrid: function(gridName), that using the same function for modular B is looking for a different div
What exactly does showGrid: do?