Backbone视图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链接起来...我应该保留元素以避免内存泄漏风险吗？

谢谢！

- Cimm

---

我一直在阅读关于Backbone.js的僵尸问题（或内存泄漏问题）。你有相关链接或文章吗？ - Crescent Fresh

请看这里：http://lostechies.com/derickbailey/2011/09/15/zombies-run-managing-page-transitions-in-backbone-apps/ - Cimm

德里克确实为你提供了一个解决方案，不是吗？ 一个视图管理器，或者你可能想称之为这样。 - Sander

Answer 1

关于在您的页面中丢失page1元素，因此无法使用HTML填充该项，我采取了以下措施。

不要再使用：

this.remove();

... which removes the element entirely, and then try to figure out how to add it back, I use jQuery's:

...这种方法完全删除元素，然后尝试找出如何将其添加回来，我使用jQuery的：

$(this).empty;

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

事实上，我使用以下全部内容，可能有些过度但我们可以看看：

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

希望这对你有所帮助！

- Alejandro Rubio

Answer 2

作为文章所说的（是的，我之前在自己的项目中尝试过他的方法），你需要找到一种方法来删除视图的DOM元素并解除事件绑定。然而，有两种类型的事件，1）Backbone事件，2）使用jQuery绑定到DOM元素的事件。

因此，不要使用以下代码：

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

做这个：

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

现在您正在删除Backbone事件;视图上的this.remove将调用$(this.el).remove();。

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

- Sander

---

谢谢Sander。我不确定“视图管理器”，因为我没有在其他地方看到这个解决方案，而且我认为可能有一种内置的方法来解决这个问题。 - Cimm

没有内置的方法，因为如果他们内置了这个功能，将会限制太多用户如何创建应用程序，backbone仅为您的应用程序提供一些结构，您可以选择要实现什么和如何实现它，这种自由是关键！ :) 所以目前没有内置的视图管理器，虽然Derick的想法不是唯一的想法，也很可能不是圣杯，但它是一个重大的进步 :) - Sander

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

- d0001