Marionette addRegions vs regions by LayoutView

Question

I tried creating regions using Marionette.LayoutView but when I render it, nothing shows up in the target region. However if I create the same regions using addRegions, it works fine. And I just could not figure why.

App = new Marionette.Application();

AppLayoutView = Marionette.LayoutView.extend({
    template: "#app-container",
    regions: {
    headerRegion: "#header-region",
    mainRegion: "#main-region",
    drawerRegion: "#drawer-region",
    dialog: "#dialog-region"
    }
});

App.mainlayout = new AppLayoutView();
App.mainlayout.render();

App.drawerView = new DrawerView();
App.mainlayout.getRegion('drawerRegion').show(App.drawerView);

If I change the codes to use addRegions as follows, it renders successfully.

App = new Marionette.Application();
App.addRegions({
      headerRegion: "#header-region",
      mainRegion: "#main-region",
      drawerRegion: "#drawer-region",
      dialog: "#dialog-region"
    });

App.drawerView = new DrawerView();
App.drawerRegion.show(App.drawerView);

Can someone help me understand why one works and the other does not, even though it is my understanding that they do the same thing. Maybe I misunderstood. Thanks

Answer 1

For your AppLayoutView, if all those div's are actually inside your '#app-container'

Then you can just use:

App.mainlayout.drawerRegion.show(App.drawerView);

But my guess is that your main template might be wrong, it will need to look like this:

<script id="app-container" type="text/template">
    <div>
        <div id="drawer-region">...</div>
    </div>
</script>