显示、隐藏、然后重新显示布局会中断事件答案

【问题标题】：Showing, Hiding, then re-showing Layouts breaks Events显示、隐藏、然后重新显示布局会中断事件
【发布时间】：2012-09-23 18:32:58
【问题描述】：

无法显示、隐藏和重新显示 Marionette Layouts。我相信这个问题也适用于常规的 Backbone Views 和 Marionette ItemViews。

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

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

这是一个 sample application，它演示了我在说什么：

这里有一段视频，展示了被破坏的事件：Video Link

非常感谢！

【问题讨论】：

有点惊讶这个问题被否决了......
我不知道是谁投了反对票，但我认为这个问题显示了努力、研究和清晰。

标签： javascript backbone.js marionette backbone-events backbone-views

【解决方案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());
}

【讨论】：

我需要保留子布局的状态。有什么方法可以做到这一点，而无需每次都重新创建子布局？
我认为你可以在你的子布局中覆盖close() 函数，这样当你关闭它们时事件就不会被取消。检查骨干木偶的原始关闭功能（第 182 行）的源代码，并尝试根据您的需要创建它的“轻量级”版本。

【解决方案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()

【讨论】：