HTML

<body>
  <div id="content">
       <header id="header"></header>
       <div id="wrapper">
               <span>Some View Content</span>
       </div>
       <footer id="footer"></footer>
  </div>
</body>

App.js

MyApp = new Backbone.Marionette.Application();
var rm = new Marionette.RegionManager();

var regions = rm.addRegions({
    mainRegion : '#content',
    headerRegion : '#header',
    wrapperRegion : '#wrapper',
    footerRegion : '#footer'
});

regions.headerRegion.show(new HeaderView());
regions.wrapperRegion.show(new SomeView());
regions.footerRegion.show(new FooterView());

如果我想在wrapperRegion中追加另一个视图怎么做呢？

我还想知道有没有办法在现有视图中插入另一个视图？布局管理器允许我写下面提到的代码..如何在木偶上实现这样的东西？

var MyView = Backbone.View.extend({

  tagName: "div",

  beforeRender: function() {
     this.insertView(new ItemView());
  }
});

Answer 1

每个地区一个视图。只需定义另一个区域即可放入其他视图。

Answer 2

你可以简单地将包装区域设为Marionette.Layout 你可以在那里找到文档 Marionette.LayoutView

基本上，布局是项目视图的扩展，它可以递归地包含其他区域。这意味着您可以在布局中渲染多个视图，并且布局本身可以在另一个区域中渲染。

Answer 3

要附加视图，您需要一个布局视图

布局视图包含区域管理器

但首先你需要添加一个由区域管理器控制的元素，如

var AppLayoutView = Backbone.Marionette.LayoutView.extend({
  template: "#layout-view-template",

  regions: { 
  }
  appendView: function ( incremennt, newView ){
     this.$el.append( '<div id="view'+increment+'" >' ) ;
     this.regionManager.addRegion( 'view'+increment , '#view'+increment )
     this['view'+increment].show ( newView ) ;
  }
});

为新视图创建新ID，将其添加到布局

然后区域经理将其添加为区域

你在那里展示你的观点

在区域内附加另一个视图 - 牵线木偶

HTML

App.js

3 个答案: