marionette nested layouts unable to show view

Question

In my application, I am creating nested layout views, as below:

=> a app layout view which has header and body regions

var AppLayoutView = Marionette.LayoutView.extend({
    el : "body",
    regions: {
        headerRegion: "#ecp_header",
        bodyRegion: "#ecp_body",
        contentRegion: "#home"
    },

=> dashboard layout view which is nested inside body region of app layout

ECPApp.DashboardLayoutView = Marionette.LayoutView.extend({
    el: "#home",
    regions: {
        menuRegion: "#left-menu",
        contentRegion: "#usr-dashboard"
    },

The parent layout (applayout) creates n adds a set of bootstrap tab content panes to the DOM, so the child layout view (dashboard lyt) can use the first tab pane (#home) to show a sidebar menu and content portion within this first tab pane.

I am rendering both the layouts as below: applayout:

The app layout renders correctly and attaches the required header and footer elements to the DOM. After rendering the app layout, I trigger a boostrap.tab.shown event. In the handler of this event I am trying to draw the child layout view (dashboard lyt).

{
  render: function() {
    // load and attach templates for header and body regions.
    var headerView = new HeaderView({model:session});
    this.headerRegion.show(headerView);

    var bodyView = new BodyView({model:session});
    this.bodyRegion.show(bodyView);

    // finally trigger a bootstrap tab show event, so
    // the rest of the content will be drawn on tabshown evt.
    headerView.$el.find('a#home-tab').tab('show');
  },

  onTabShown: function() {
    var self = this;
    // create an instance of nested layout view and show it.
    var dbLytView = new UserDashboardLayoutView();
    dbLytView.render();
    //self.contentRegion.show(dbLytView);
  }
}

Now comes the problem, when I call applayout.contentregion.show(dashboardlyt), The child layout's render gets called and it loads a set of templates for its internal regions (left menu and dashboard content). But as soon as the render call returns to the caller (parent lyt) it tries to do a show(...) of the rendered view, the DOM node is disappearing.

Below is the screenshot just before the child lyt render returns. We can see that the child lyt has added its elements correctly.

Once the render returns and the parent completes the show method, the elements are disappearing.

DOM elements before the render call returns:

After the call returns and parent show executes

It can be seen that the highlighted node in the above pic, is not available any more, after the show method executes.

What am I doing wrong here?

Answer 1

Jacob is right, declaring the render method is totally the wrong approach.

It should be onRender.

{
  onRender: function() {
    // load and attach templates for header and body regions.
    var headerView = new HeaderView({model:session});
    this.headerRegion.show(headerView);

    var bodyView = new BodyView({model:session});
    this.bodyRegion.show(bodyView);

    // finally trigger a bootstrap tab show event, so
    // the rest of the content will be drawn on tabshown evt.
    headerView.$el.find('a#home-tab').tab('show');
  },