Question

我有Layout有几个标签。点击其中一个标签会show页面内容region中的相应合成视图。在不同选项卡之间来回导航后，我注意到复合视图已丢失其原始绑定，以便在集合重置和模型更改时呈现。

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

目前，我正在我的initialize的{{1}}创建我的所有观看次数，然后在点击标签时使用Layout的视图。

show

Answer 1

每次从tab切换到tab时都不必创建Layout / Item / Composite / Collection视图，相反，你可以按照你的方式将内容保存在变量中，你遇到的问题是每次要呈现内容时都会重新声明变量。解决方案是您必须验证是否声明了该变量（this.places_page），如果没有将其附加到视图中，那么当您多次调用它时，它将保持相同的布局视图而没有任何问题，请注意当您渲染时嵌套子视图（在区域中）的主视图（包含区域的视图）将丢失，直到通过它们进行新的navegation。

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();
},

Answer 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创建视图？

Answer 3

Marionette（v.1）onwords使用Backbone.BabySitter来管理子视图。

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

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

以后显示视图只需执行此操作

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

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

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

Answer 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.
}

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

4 个答案: