主干视图 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.el).remove();。

然而，这只是如何移除视图而不留下僵尸。您应该考虑他的显示视图的方法，以使此过程更加自动化。
这一切都在他的文章中。

Answer 3

Backbone 开发版本（master）现在公开 _removeElement()

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

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

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

http://backbonejs.org/docs/backbone.html