8

我使用 Backbone LayoutManager 在应用程序中管理我的视图。我想试试木偶。我遇到了一个问题，我无法将视图附加到区域。

HTML

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

应用程序.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());
  }
});
4

3 回答 3

10

每个区域一个视图。只需定义另一个区域来放置您的其他视图。

于 2013-05-19T16:03:59.847 回答
6

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

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

于 2013-05-20T12:34:05.393 回答
1

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

布局视图具有区域管理器

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

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 将其添加到布局中

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

你在那里展示你的观点

于 2015-03-21T06:32:42.833 回答