Backbone.marionnette - 重新绑定事件与创建新视图答案

【问题标题】：Backbone.marionnette - Rebinding events vs creating new viewBackbone.marionnette - 重新绑定事件与创建新视图
【发布时间】：2013-03-06 20:34:31
【问题描述】：

我有一个Layout，它有几个标签。单击这些选项卡之一将show 页面内容region 中的适当复合视图。在不同的选项卡之间来回导航后，我注意到复合视图已经失去了在集合重置和模型更改时呈现的本机绑定。

有没有办法在第二次显示视图时重新绑定在复合视图的_initialEvents 中使用的事件，或者我应该在每个show 一个选项卡时创建一个新的复合视图？

目前，我在Layout 的initialize 中创建所有视图，然后在单击选项卡时将show 与视图一起使用。

initialize: function(){
    _.bindAll(this);

    //     Tabs
    this.places_page   = new Places_Layout();
},

show_places_page: function(){

    this.content.show(this.places_page);
    this.places_page.delegateEvents();
},

【问题讨论】：

是的，我认为每次必须更改内容时都应该创建一个新的复合视图 istance，这是因为当您在区域上调用 show 方法时，它会小心关闭和取消绑定任何旧视图那是附属于该地区的。所以我认为当你再次将它附加到该区域时，它错过了一些事件......

标签： backbone.js marionette backbone-events

【解决方案1】：

您不必每次从选项卡切换到选项卡时都创建布局/项目/复合/集合视图，相反，您可以按照您的方式将内容保存在变量中，您遇到的问题是每次要呈现内容时都会重新声明该变量。解决方案是您必须验证该变量（this.places_page）是否已声明，如果没有将其附加到视图中，因此当您多次调用它时，它将保持相同的布局视图没有任何问题，只需注意在渲染时主视图（包含区域的视图）嵌套的子视图（在区域中）将丢失，直到通过它们进行新的导航。

initialize: function(){
    _.bindAll(this);

    // You can asign a diferent variable for each view so when you call show_places_page it will render with the same view.

    if (!this.places_page){
         this.places_page   = new Places_Layout();
    }

    // other tab        
    if (!this.other_page){
         this.other_page   = new OtherPage_Layout();
    }

},

show_places_page: function(){

    this.content.show(this.places_page);
    this.places_page.delegateEvents();
},

【讨论】：

【解决方案2】：

这听起来对我来说不是最好的方法。

您应该使用布局的区域管理器来显示视图，而不需要您定义的功能。

我会选择这种方法

var view = new CustomView();
layout.content.show(view);`

然后：

var newView = new SecondCustomView();
layout.content.show(newView);

如果你想继续你正在走的路，那么你最好使用这种方法：

initialize: function () {
    _.bindAll(this);
},
show_places_page: function () {
    var placesLayout = new Places_Layout();
    this.content.show(placesLayout);
}

这有意义吗？

如果没有看到更多的结构，很难提出最佳行动方案。

您在initialize 中创建视图有什么原因吗？

【讨论】：

【解决方案3】：

Marionette(v.1) onwords 使用 Backbone.BabySitter 管理子视图。

在您的情况下，您也这样做。只需创建一个容器来存储所有选项卡视图。稍后查询容器返回你需要显示的视图。

this.tabViewsContainer = new Backbone.ChildViewContainer();
this.tabViewContainer.add(new CustomView(),'tab1');
this.tabViewContainer.add(new SecondCustomView(),'tab2');

To later Show view just do this

var custv = container.findByCustom("tab1");
this.content.show(custv);

在关闭方法中，您的布局视图成功关闭容器中的所有视图

this.tabViewsContainer.each(function(view){view.close()});

【讨论】：

【解决方案4】：

您不应该在初始化中创建所有视图，因为这会导致内存泄漏，这就是您应该动态创建视图的原因。另外，我建议创建一个通用函数来在您的内容区域中显示视图，以增加代码的可重用性。我建议您使用以下解决方案：

//define the regions of your layout view
regions: {
  content: '#content'
},
//Maintain a config for the tab content view classes.
contentViews: {
  tab1: Tab1View,
  tab2: Tab2View,
  tab3: Tab3View
},
//keeps all the view instances
viewInstances: {},
/*
 * show tab function is called when you click a tab item.
 * Consider each tab has a attribute for tab name.
 * For example HTML of your one tab is like:
 * <div data-tab-name="tab_name">Tab <tab_name></div> 
 */
showTab: function (e) {
  var tabName = $(e.currentTarget).attr("data-tab-name");
  /*
   * code for showing selected tab goes here...
   */

  //check and create the instance for the content view
  if (!this.viewInstances[tabName]) {
      this.viewInstances[tabName] = new this.contentViews[tabName]();
  }
  //Then here you are actually showing the content view
  this.content.show(this.viewInstances[tabName]);
  this.viewInstances[tabName].delegateEvents(); //this is to rebind events to the view.
}

【讨论】：