javascript 删除了主干视图 DOM 元素
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8482488/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Backbone view DOM element removed
提问by Cimm
I keep reading about the Backbone.js zombie (or memory leak) problem. Basically you have to unbind and remove the element from the DOM when you no longer need it to make sure all events are removed as well.
我一直在阅读有关 Backbone.js 僵尸（或内存泄漏）问题的信息。基本上，当您不再需要元素时，您必须从 DOM 中解除绑定并移除元素，以确保所有事件也被移除。
Now, I have a single page app with a few containers:
现在，我有一个带有几个容器的单页应用程序：
<div id="page1"></div>
<div id="page2"></div>
and add my underscore.js templates to these placeholders. I have a model per page like:
并将我的 underscore.js 模板添加到这些占位符中。我每页都有一个模型，例如：
HomeView = Backbone.View.extend({
el: '#page1'
)}
Now, when I click on an element on that page I navigate to another Backbone.js view:
现在，当我单击该页面上的一个元素时，我导航到另一个 Backbone.js 视图：
clicked: function(ev){
$(this.el).remove(); // <-- this is the problem
$(this.el).unbind();
App.navigate('page/2', true);
}
This works fine but... I removed the page1element from the DOM so when I use the back button to go to the previous page my element is gone and there is nothing to attach the HTML to.
这工作正常，但是...我page1从 DOM 中删除了元素，所以当我使用后退按钮转到上一页时，我的元素消失了，没有任何可以附加 HTML 的内容。
I probably don't understand how to link Backbone.js views with the DOM... should I keep the element with the risk of memory leaks?
我可能不明白如何将 Backbone.js 视图与 DOM 联系起来……我应该让元素有内存泄漏的风险吗？
Thanks!
谢谢！
回答by Alejandro Rubio
In regard to losing the page1 element in your page, and therefore not being able to populate the item with HTML, I did the following.
关于丢失页面中的 page1 元素，因此无法用 HTML 填充该项目，我执行了以下操作。
Instead of using:
而不是使用：
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;
This empties all child elements, text, and data and event handlers. More info at: http://api.jquery.com/empty/
这将清空所有子元素、文本以及数据和事件处理程序。更多信息请访问：http: //api.jquery.com/empty/
In fact, I use all of the following, which may be overkill but we'll see:
事实上，我使用了以下所有内容，这可能有点矫枉过正，但我们会看到：
this.undelegateEvents();
$(this).empty;
this.unbind();
Hope this is useful!
希望这是有用的！
回答by Sander
As the article says, (yes, I've tried his methods before in my own projects), you have to find a way to remove your view's DOM element and unbind the events. There are, however, 2 types of events, 1) Backbone events, 2) the events that are bound to your DOM elements with jQuery.
正如文章所说，（是的，我之前在我自己的项目中尝试过他的方法），您必须找到一种方法来删除视图的 DOM 元素并取消绑定事件。然而，有两种类型的事件，1）主干事件，2）使用 jQuery 绑定到 DOM 元素的事件。
So instead of your:
所以而不是你的：
$(this.el).remove();
$(this.el).unbind();
Do this:
做这个：
this.remove();
this.unbind();
You are now removing Backbone events as well; and the this.removeon a view will call $(this.el).remove();.
您现在也正在删除 Backbone 事件；并且this.remove视图上的 将调用$(this.el).remove();.
However, that is only how to remove a view and not leave zombies. You should consider his methods for showing a view to make this process more automatic. This is all in his article.
但是，这只是删除视图而不是留下僵尸的方法。您应该考虑他显示视图的方法，以使此过程更加自动化。这一切都在他的文章中。
回答by d0001
Backbone development version(master) now exposes _removeElement()
Backbone 开发版本(master) 现在公开 _removeElement()
remove: function() {
this._removeElement();
this.stopListening();
return this;
},
Remove this view's element from the document and all event listeners attached to it. Exposed for subclasses using an alternative DOM manipulation API.
从文档和附加到它的所有事件侦听器中删除此视图的元素。为使用替代 DOM 操作 API 的子类公开。
_removeElement: function() {
this.$el.remove();
},
