6

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

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

目前我正在创建我的所有视图initialize，Layout然后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();
},
4

4 回答 4

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();
},
于 2013-05-16T15:50:28.993 回答
0

Marionette(v.1) onwords uses Backbone.BabySitter to manage child views .

In your case you do the same. Just create a containter to store all tab view. Later query the container to return the view you need to display.

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

To Later Show the view just do this

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

In close method your layout view successfully close all view in container

this.tabViewsContainer.each(function(view){view.close()});
于 2013-05-07T19:05:29.957 回答
0

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

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

我会采用这种方法

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？

于 2013-03-08T01:58:09.153 回答
0

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

//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.
}
于 2014-12-23T14:45:42.533 回答