Question

我一直在阅读Backbone.js僵尸（或内存泄漏）问题。基本上，当您不再需要它来确保所有事件都被删除时，您必须解除绑定并从DOM中删除该元素。

现在，我有一个带有几个容器的单页应用程序：

<div id="page1"></div>
<div id="page2"></div>

并将我的underscore.js模板添加到这些占位符。我每页都有一个模型，如：

HomeView = Backbone.View.extend({
  el: '#page1'
)}

现在，当我点击该页面上的某个元素时，我会导航到另一个Backbone.js视图：

clicked: function(ev){
  $(this.el).remove(); // <-- this is the problem
  $(this.el).unbind();
  App.navigate('page/2', true);
}

这很好但是......我从DOM中删除了page1元素，因此当我使用后退按钮转到上一页时，我的元素消失了，没有任何内容可以将HTML附加到。 / p>

我可能不明白如何将Backbone.js视图与DOM链接...我应该保留元素存在内存泄漏的风险吗？

谢谢！

Answer 1

关于丢失页面中的page1元素，因此无法使用HTML填充项目，我执行了以下操作。

而不是使用：

this.remove();

...完全删除元素，然后尝试弄清楚如何添加它，我使用jQuery：

$(this).empty;

这会清空所有子元素，文本，数据和事件处理程序。更多信息：http://api.jquery.com/empty/

事实上，我使用以下所有内容，这可能有点矫枉过正，但我们会看到：

this.undelegateEvents();
$(this).empty;
this.unbind();

希望这很有用！

Answer 2

正如文章所说，（是的，我之前在我自己的项目中尝试过他的方法），你必须找到一种方法来删除视图的DOM元素并取消绑定事件。但是，有两种类型的事件，1）Backbone事件，2）使用jQuery绑定到DOM元素的事件。

所以不是你的：

$(this.el).remove();
$(this.el).unbind();

这样做：

this.remove();
this.unbind();

您现在也在删除Backbone事件;并且视图上的this.remove会调用$(this.el).remove();。

但是，这只是如何删除视图而不是留下僵尸。你应该考虑他的方法来显示一个视图，使这个过程更自动化。这一切都在他的文章中。

Answer 3

Backbone开发版（master）现在公开了_removeElement（）

 remove: function() {
      this._removeElement();
      this.stopListening();
      return this;
    },

从文档和附加到它的所有事件侦听器中删除此视图的元素。使用备用DOM操作API公开子类。

_removeElement: function() {
      this.$el.remove();
    },