Marionette 通过 LayoutView 添加区域与区域

Question

我尝试使用 Marionette.LayoutView 创建区域，但是当我渲染它时，目标区域中没有显示任何内容。但是，如果我使用 addRegions 创建相同的区域，它就可以正常工作。我只是想不通为什么。

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);

如果我按如下方式更改代码以使用 addRegions，它会成功呈现。

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);

谁能帮我理解为什么一个有效而另一个无效，尽管我的理解是他们做同样的事情。也许我误解了。谢谢

Answer 1

对于您的 AppLayoutView，如果所有这些 div 实际上都在您的“#app-container”

中

那么你可以使用：

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

但我猜你的主模板可能是错误的，它需要看起来像这样：

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

Marionette 通过 LayoutView 添加区域与区域

Marionette addRegions vs regions by LayoutView

backbone.js

marionette