marionette 嵌套布局无法显示视图

Question

在我的应用程序中，我正在创建嵌套布局视图，如下所示：

=> 具有页眉和正文区域的应用布局视图

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

=> 仪表板布局视图嵌套在应用程序布局的正文区域中

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

父布局（appplayout）创建 n 添加一组 bootstrap 选项卡内容窗格到 DOM，因此子布局视图（dashboard lyt）可以使用第一个选项卡窗格（# home) 以在第一个选项卡窗格中显示侧边栏菜单和内容部分。

我正在渲染两种布局，如下所示：应用程序：

应用程序布局正确呈现并将所需的页眉和页脚元素附加到 DOM。呈现应用程序布局后，我触发了一个 boostrap.tab.shown 事件。在此事件的处理程序中，我正在尝试绘制子布局视图（仪表板 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);
  }
}

现在问题来了，当我调用 applayout.contentregion.show(dashboardlyt) 时，子布局的渲染被调用并为其内部区域（左侧菜单和仪表板内容）加载一组模板。但是一旦渲染调用 returns 到调用者（父 lyt），它会尝试对渲染视图进行显示（...），DOM 节点就会消失。

下面是子 lyt 渲染之前的屏幕截图 returns。我们可以看到子 lyt 已经正确添加了它的元素。

一旦渲染 returns 和父级完成显示方法，元素就会消失。

DOM 个渲染调用前的元素 returns：

调用 returns 和父节目执行后

可以看出，上图中高亮的节点，在show方法执行后，已经不可用了

我做错了什么？

Answer 1

Jacob 是对的，声明 render 方法是完全错误的方法。

应该是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');
  },

marionette 嵌套布局无法显示视图

marionette nested layouts unable to show view

backbone.js

marionette