骨干视图DOM元素除去

问题描述：

我保持阅读有关Backbone.js的僵尸（或内存泄漏）的问题。基本上，当你不再需要它时，你必须解除绑定并从DOM中移除该元素，以确保所有事件都被移除。骨干视图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 ...我应该保持与内存泄漏风险的元素？

谢谢！

> *我一直在阅读有关Backbone.js的僵尸（或内存泄漏）的问题*有一个链接或文章做后盾的时候了？ –

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

井德里克确实为你提供了一个解决方案吗？一个视图管理器或您可能想要调用它。 – Sander

答

正如文章说，（是的，我已经试过了他的方法在我自己的项目）之前，你必须找到一个方法来消除你的视图的DOM元素和取消绑定事件。有，但是，2种类型的事件，1）骨干事件，2）绑定到使用jQuery的DOM元素的事件。

所以不是你的：

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

这样做：

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

现在，您要删除骨干事件为好;并且视图上的this.remove将调用$(this.el).remove();。

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

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

没有任何构建方式，因为如果他们将内置的内容限制为许多用户创建应用程序的方式，那么主干只会为您的应用程序提供一些结构，您可以选择要实现它的方式以及方式，这种自由是关键！ :)所以现在没有内置的视图管理器，而derick的想法不是唯一的想法，并且很可能不是圣杯，这是一个巨大的飞跃:) – Sander

答

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

而不是使用：

this.remove();

...这完全删除元素，然后揣摩如何将它添加回去，我使用jQuery的：

$(this).empty;

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

其实，我使用所有的以下的，这可能是矫枉过正，但我们会看到：

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

希望这是很有用的！

答

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

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

从文档和连接到它的所有事件侦听器中删除此视图的元素。暴露于使用替代DOM操作API的子类。

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