删除了骨干视图DOM元素

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。

我可能不明白如何将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.remove将调用$(this.el).remove(); 。

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

Answer 3

骨干开发版本（master）现在公开_removeElement（）

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

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

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