查看未显示backbone.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无论是在您的视图或布局