javascript - 删除 Backbone View 后僵尸事件仍然存在

Question

更新:根据我的评论，我的问题是我有一个额外的模型，我正在将其传递到我没有取消绑定(bind)事件的 View 中。当我看到事件处理程序被触发时，我假设源来自 this.model 而不是 this.extra_model，因为我忘记了 this.extra_model 也被用于错误验证。

解决方案是添加以下内容:

MyView = Backbone.extend({
  //...
  //add method to override BaseView
  cleanUp: function() {
    this.extra_model.off(null, null, this);
    BaseView.prototype.cleanUp.apply(this, arguments);
  },
  //...
});

感谢您审阅问题，对程序员的错误深表歉意。

---

全部:清理 View 后，陈旧/僵尸事件仍然存在问题。当我将自定义事件绑定(bind)到模型时，问题就来了。当我从 dom 中删除 View 时，我调用“this.model.off(null, null, this);”正如各种留言板上所建议的那样，但是尽管我可以看到“自定义处理程序”回调在 chrome 调试器工具中被删除，但我仍然注意到“自定义处理程序”的事件处理程序被调用的次数超过了应有的次数(每个额外的一个)我在清理 View 后重新创建 View 的时间)触发事件时。有人可以告诉我我的清理代码是否遗漏了什么吗？提前致谢!

BaseView = Backbone.extend({
//...
      displayErrors:function(){},

      cleanUp: function(){
        if (this.model) this.model.off(null, null, this);
        if (this.collection) this.collection.off(null, null, this);
        if (!this.options.persistDataAfterViewCleanup) {
          if (this.model) delete this.model;
          if (this.collection) delete this.collection;
        }
        //_.each(this.subViews, function(view){view.cleanUp();}); not needed yet.
        this.undelegateEvents();
        $(this.el).removeData().unbind();
        //Remove view from DOM
        this.$el.html('');
        this.remove();
      }
});

MyView = BaseView.extend({
  initialize: function(){
    //called manually from model using trigger
    this.model.on('custom-handler', this.displayErrors, this);
  }
});

Answer 1

假设您使用的是最新版本的 Backbone (0.9.10)，您应该使用新的 Backbone.Events.listenTo绑定(bind)事件监听器的方法。使用此方法 Backbone 将保留对该对象的引用，并在 view.remove() 时自动清除所有事件绑定(bind)。 :

this.listenTo(this.model, 'custom-handler', this.displayErrors);

您在cleanUp 方法中所做的所有事情(delete、undelegateEvents、removeData、 unbind, $el.html('')) 看起来很像巫毒编程。这些步骤都不是必需的。

您的僵尸 View 很可能是由于对您自己的代码直接或间接持有的 View 的某些引用。引用可以由事件处理程序、绑定(bind)函数、导出的闭包或任何数量的东西持有。我建议您尝试分析您的代码，并使用 Chrome 开发者工具的 Heap profiler工具来尝试查找保留的对象及其引用。

查看 my answer in this SO question ，我在其中描述了一种在特定代码路径中查找内存泄漏的简单方法。虽然您的问题不直接与内存泄漏有关，但与泄漏引用有关，其保留的堆大小应该可以帮助您找到它们上的内容。