删除了骨干视图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);
}

这工作正常,但...我page1从DOM中删除了元素,所以当我使用后退按钮转到上一页时,我的元素消失了,没有任何内容可以附加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();.

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