Question

我的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（）对我的理解不是必需的，因为在区域管理器的 show（）功能。要查看问题，请通过导航导航到其他视图，然后单击按钮。您将看到旧视图和新视图都会触发警报。

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

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

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

如果您需要任何其他信息，请与我们联系。提前谢谢！

Answer 1

对于此类情况，您应该利用onDestroy功能进行除Marionette提供的额外清理工作。当更换或删除视图时，Marionette会自动调用onDestroy。

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

来自木偶文件：

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

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

请注意，我确实更新了路线配置中的拼写错误：'showVeiw1' - ＆gt; 'showView1'

Answer 2

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

Backbone Marionette - 布局查看僵尸

2 个答案: