显示、隐藏,然后重新显示布局中断事件

问题是,您不会为子布局创建新的距离,而只是重复使用您在主布局中启动的距离。因此,当您更改区域的内容时,作为Marionette视图的close()函数的一部分,事件将解除绑定。

您应该这样更改初始化函数:

initialize: function(){
    _.bindAll(this);
    // CREATE SUB LAYOUTS
   this.tab1Layout = B.tab1Layout;
   this.tab2Layout = B.tab2Layout;
},

并以这种方式调用布局:

// EVENT HANDLERS
on_show_tab_1_click: function(event){
    this.content.show(new this.tab1Layout());
},
on_show_tab_2_click: function(event){
    this.content.show(new this.tab2Layout());
}

如果您不想在每次更改选项卡时重新初始化选项卡视图,可以手动调用view.deleteEvents():

// views[] is array of initialized tab views
// Swap from displaying views[0] to views[1]
currentTabIndex = 1
this.myRegion.show(views[currentTabIndex])
views[currentTabIndex].delegateEvents()

为了保持状态,另一个选项是渲染两个选项卡,并简单地隐藏不活动的选项卡区域:

// Assume both regions have initialised views, tab2Region is hidden, 
// tab1Region is shown.
// Swap between tabs:
this.tab1Region.$el.hide()
this.tab2Region.$el.show()