显示，隐藏，然后重新显示Layouts打破事件

Question

无法显示，隐藏，然后重新显示木偶布局。我相信这个问题也适用于常规的Backbone Views和Marionette ItemViews。

总之，我有一个父视图。初始化时，它会创建两个子布局，用作选项卡内容。问题是，当显示来自一个选项卡的选项卡内容时，将显示来自另一个选项卡的内容，当再次显示原始选项卡内容时，事件将不再起作用。

子布局在父布局的initialize函数中创建并重新使用，因为当导航移回它们时需要保留它们的状态。

以下是sample application，展示了我所说的内容：

以下是显示已损坏事件的视频：Video Link

非常感谢！

Answer 1

问题在于，您不会创建子布局的新范围，只需重新使用您在主布局中启动的布局即可。因此，当您更改区域内容时，事件将被取消绑定，作为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());
}

Answer 2

如果您不想在每个标签更改上重新初始化标签视图，可以手动调用view.delegateEvents（）：

// 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()