backbone.js - 视图未显示在主干.marionette

Question

我试图构建一个示例来演示 Backbone.Marionette 的区域和布局。但我坚持布局，虽然我调用 layout.region.show() ，但它没有显示在 DOM 中的任何地方。

完整的例子可以在这个JsFiddle中找到。

这是布局部分：

AppLayout = Backbone.Marionette.Layout.extend({
template: "#layout-template",
  el : "layout-containr",

regions: {
  menu: "#menu",
  content: "#content"
}

});

布局模板：

<script id="layout-template" type="text/template">
<section>
  <div id="menu"></div>
  <div id="content"></div>
</section>

这是我显示布局的方式：

var layout = new AppLayout();
layout.render();
layout.menu.show(gridView);

GridView 的定义可以在这里找到：

 var GridView = Backbone.Marionette.CollectionView.extend({
itemView: GridRow,
  el:'#menu'

}); 

完整的例子可以在这个JsFiddle中找到。

我有一个免费的问题：

布局如何知道它应该附加在哪里？？？我在网上的任何地方都没有找到它，这让我确信我在这里遗漏了一些概念。

Answer 1

您需要更大的区域来显示应用程序级别的布局。

通常当你初始化一个 Marionette 应用程序时，你会有一些顶层区域来显示你想要稍后渲染的布局。

App.addInitializer =>
  App.addRegions
    menuRegion: '#header'
    contentRegion: '#stage' # These DOM come from your application layout

然后在您的控制器中，您在顶层区域中显示这些布局。

indexShow: ->

  layout = new App.Layouts.SomeLayout()
  App.contentRegion.show(layout)

  someView = new App.Views.SomeView()
  anotherView = new App.Views.AnotherView()

  layout.someSubRegion.show(someView)
  layout.anotherSubRegion.show(anotherView)

el而且，您的视图或布局中通常不需要