在木偶版面上的区域内自动初始化和显示视图

时间:2013-06-28 11:10:37

标签: marionette

我有一个布局,带有一个区域。初始化布局时,我希望它自动初始化预设视图以进入其区域,并在显示/关闭布局本身时显示/关闭它。

来自https://github.com/marionettejs/backbone.marionette/blob/master/docs/marionette.layout.md的当前示例:

AppLayout = Backbone.Marionette.Layout.extend({
  template: "#layout-template",    
  regions: {
    mainRegion: "#menu",
    content: "#content"
  }
});

var layout = new AppLayout();
ParentAppLayout.show(layout); // Render the Layout to a parent
layout.mainRegion.show(new SubView());

此示例表明必须首先显示布局,然后然后我可以初始化并显示子视图。 (上面,如果我在显示SubView之前显示layout,则不会发生任何事情,我假设因为DOM中不存在选择器?)

对于可重复使用的布局,我想将此发送视图显示添加到布局本身,而不是必须在使用视图的任何地方手动添加它。如何实现这一目标?

AppLayout = Backbone.Marionette.Layout.extend({
  template: "#layout-template",    
  regions: {
    mainRegion: "#menu",
    content: "#content"
  },
  initalize: function() {
     this.mainRegion.attachView(new SubView());  
  },
  onShow: function() {
     this.mainRegion.show(this.mainRegion.currentView);
  }
});

var layout = new AppLayout();
ParentAppLayout.show(layout); // Render the Layout to a parent, expecting the child view to also be created automatically

然而,这种方法也没有做任何事情 - 没有错误。

1 个答案:

答案 0 :(得分:5)

这样做

AppLayout = Backbone.Marionette.Layout.extend({
  template: "#layout-template",    
  regions: {
    mainRegion: "#menu",
    content: "#content"
  },
  onShow: function() {
     this.mainRegion.show(new SubView());
  }
});

var layout = new AppLayout();
ParentAppLayout.show();

否则,如果创建SubView费用昂贵,您可以在initialize这样做

initialize: function() {
  this.subView = new SubView();
}

稍后在onShow中使用它。