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

视图未显示在backbone.marionette中

1 个答案: