查看未顯示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無論是在您的視圖或佈局