Backbone Marionette - 布局视图僵尸答案

【问题标题】：Backbone Marionette - Layout View ZombiesBackbone Marionette - 布局视图僵尸
【发布时间】：2016-05-13 15:10:11
【问题描述】：

我的 Backbone Marionette 应用程序出现问题，我的子视图没有被完全破坏。如何正确销毁要替换为另一个布局/项目视图的嵌套布局视图？

Marionette documentation on destroying layout views 给我的印象是，当我设置一个区域来显示新视图时，旧视图会被破坏。但是，通过 vent 触发的事件仍然可以被本应销毁的旧视图看到。

我在这里创建了这个问题的示例：https://jsfiddle.net/dhardin/5j3x2unx/

我认为问题出在我的路由器上：

App.Router = Marionette.AppRouter.extend({
  routes: {
    '': 'showView1',
    'view1': 'showView1',
    'view2': 'showView2'

  },
  showView1: function() {
    var view1 = new App.View1();
    App.Layout.mainRegion.empty();
    App.Layout.mainRegion.show(view1);
  },
  showView2: function() {
    var view2 = new App.View2();
    App.Layout.mainRegion.empty();
    App.Layout.mainRegion.show(view2);
  }
});

据我了解，App.Layout.mainRegion.empty() 不是必需的，因为在 Region Manager 的 中销毁视图时会处理这一点show() 函数。要查看问题，请通过导航导航到另一个视图，然后单击按钮。您将看到旧视图和新视图都触发了警报。

回到我的木偶前应用程序中，我遵循了一种清理模式以避免here 讨论的这些内存泄漏。

本质上，当我的应用更改为新视图时，我显示的视图将调用以下函数：

Backbone.View.prototype.close = function(){
  this.remove();
  this.unbind();
}

如果您需要任何其他信息，请告诉我。提前致谢！

【问题讨论】：

标签： javascript backbone.js memory-leaks marionette

【解决方案1】：

对于这种情况，您应该利用 onDestroy 函数来完成 Marionette 提供的额外清理工作。当视图被替换或移除时，Marionette 会自动调用 onDestroy。

onDestroy: function() {
     App.vent.off('ButtonClicked', this.onButtonClicked, this);
  }

来自 Marionette 文档：

通过在视图定义中提供 onDestroy 方法，您可以为您的视图运行自定义代码，该代码在您的视图被触发后被触发销毁和清理。 onDestroy 方法将传递任何参数调用了那个destroy。这使您可以处理任何额外的清洁 up 代码，而不必重写 destroy 方法。

在此处查看工作小提琴：https://jsfiddle.net/ocfn574a/

请注意，我确实更新了您的路线配置中的错字：'showVeiw1' -> 'showView1'

【讨论】：

啊，很好。看起来我没有在上下文中传递，所以“ButtonClicked”的所有事件侦听器都被删除了。谢谢您的帮助！ :)

【解决方案2】：

您应该使用this.listenTo(App.vent, 'ButtonClicked', this.onButtonClicked) 而不是App.vent.on('ButtonClicked', this.onButtonClicked, this); 这样，当视图被销毁时，marionette 会小心移除所有侦听器，并且您无需显式处理 onDestory 事件即可移除侦听器。请参阅更新的小提琴here。所以基本上你的路由器没有问题，但是注册监听器有问题，因为监听器不存在于视图对象中，它没有被取消注册。

【讨论】：