preventing骨干僵尸意见 [英] Preventing backbone zombie views

问题描述

请注意：我们使用的骨干1.0.0

我是比较新的骨干，并打算通过一些$ C $的c进行前同事写道。而不是复制粘贴的东西盲目，我想了解他是如何做到的事情，这时候我就开始琢磨要处理僵尸意见的最佳方式。

  VAR视图=新editItemView（{模式：this.model}）;
    this.ui.editItemPopup.html（view.render（）EL）.modal（{modalOverflow：真}）;
 

这将创建的视图实例，并在自举模式弹出它。该模型具有保存更改，取消并删除按钮。我们将着眼于这是在保存更改完成并删除清洁的工作。

  onDelete：功能（）{
    this.stopListening（this.model）;
    这$ el.parent（）模式（隐藏）。
    这$ el.remove（）。
}，
onApplyChangesClick：功能（）{
    this.stopListening（this.model）;
    this.close（）;
}，
关闭：函数（）{
    这$ el.parent（）模式（隐藏）。
}
 

据我所知，这code不会放弃的看法。如果我是另一个监听器添加到上述观点

  this.listenTo（this.model.AnotherItem，改变，this.doSomething）;
 

然后触发this.model.AnotherItem change事件，this.doSomething还是会火。正确？

我做之前，张贴这一问题上的僵尸一些阅读的看法。 <一href=\"http://lostechies.com/derickbailey/2011/09/15/zombies-run-managing-page-transitions-in-backbone-apps/\" rel=\"nofollow\">http://lostechies.com/derickbailey/2011/09/15/zombies-run-managing-page-transitions-in-backbone-apps/

和基于该文章不会我会更好，如果我只是做了

  onDelete：功能（）{
    this.close（）
}，
onApplyChangesClick：功能（）{
    this.close（）;
}，
关闭：函数（）{
    这$ el.parent（）模式（隐藏）。
    this.remove（）;
}
 

his.remove（）会自动调用的stopListening，也拆除DOM元素（与此相同。$ el.remove）

这是我发布的文章也使用this.unbind（）

  

this.unbind（）将解除对我们的观点直接触发任何事件 - 那就是，任何时候我们可能已经叫 this.trigger（...）`在我们的视野之内，才能有我们的观点引发事件。

是，在骨干1.0.0（或更新版本）仍然是必要的？这篇文章是3岁，所以我在想，我找不到骨干文档中view.unbind任何提及。该文件提到，解除绑定是关闭的别名。所以我应该做

  this.remove（）;
this.off（）;
 

解决方案

好吧，首先请允许我明显：一些僵尸意见在这里或那里是不会给你带来任何问题。所有任何给定的僵尸视图会做的是吃起来的少量内存，然后走开，当用户点击刷新或导航了。所以，如果你是一个有点草率关于清理你引用的一般的事情仍然会正常工作。在那里你会在运行的问题是，当你有很多僵尸观点，说因为你呈现一个20X100表，其中的每一个细胞都有自己的查看。

现在，真正了解如何避免僵尸认为你必须了解内存在Javascript中是如何工作的。我建议你​​阅读更多关于其它地方，但这里的悬崖笔记版本：任何你停止使用会被浏览器的垃圾收集器得到清理，而且由于垃圾收集器无法确切地告诉当你停止使用的东西实际上，它那个东西是否有其他对象的任何引用去。

这就是事件绑定进来玩，因为他们可以创建prevent被垃圾收集视图引用。一个骨干的特点是，它处理清理这些绑定，如果他们为 Backbone.View 的初始化（即你把事件的部分制成在查看类）的事件属性。所以，如果你的页面中删除查看的元素，它会被垃圾回收...

...除非它有一些其他的参考它，就像使用它的另一个对象，或事件绑定您使用jQuery创建的。所以，只要你的查看■不要有任何其他的引用你是正确的：简单地删除元素就足够了。但是，如果你有任何其他的引用，您将需要清除它们，否则查看将不会被回收，将成为一个僵尸视图。

Note: we are using backbone 1.0.0

I am relatively new to Backbone, and was going to through some of the code a ex co-worker wrote. Rather than copy pasting stuff blindly, I wanted to understand how he did things, and that's when I started wondering about the best way to handle zombie views.

var view = new editItemView({ model: this.model });
    this.ui.editItemPopup.html(view.render().el).modal({ modalOverflow: true });

This creates an instance of view and pops it up in a boostrap modal. The model has Save Changes, Cancel & Delete buttons. We will look at the clean work that is done on Save changes and delete.

onDelete: function() {
    this.stopListening(this.model);
    this.$el.parent().modal('hide');
    this.$el.remove();
},
onApplyChangesClick: function () {
    this.stopListening(this.model);
    this.close();
},
close: function () {
    this.$el.parent().modal('hide');
}

As far as I can tell, this code won't discard the view. And if I were to add another listener to the aforementioned view

this.listenTo(this.model.AnotherItem, 'change', this.doSomething);

and then trigger the change event on this.model.AnotherItem, this.doSomething will still fire. Correct?

I did some reading on Zombie views prior to posting this question. http://lostechies.com/derickbailey/2011/09/15/zombies-run-managing-page-transitions-in-backbone-apps/

And based on that article wouldn't I be better off if I just did

 onDelete: function() {
    this.close()
},
onApplyChangesClick: function () {
    this.close();
},
close: function () {
    this.$el.parent().modal('hide');
    this.remove();
}

his.remove() will automatically call stopListening and also remove the dom element(Same as this.$el.remove)

The article that I posted also uses this.unbind()

this.unbind()will unbind any events that our view triggers directly – that is, anytime we may have calledthis.trigger(…)` from within our view, in order to have our view raise an event.

Is that still necessary in Backbone 1.0.0 (or latest version)? The article is 3 years old, so I was wondering and I couldn't find any mention of view.unbind in backbone documentation. The documentation mentions that unbind is an alias of off. So should I be doing

this.remove();
this.off();

解决方案

Ok, first off let me state the obvious: a few zombie views here or there are not going to cause you any problems. All any given zombie view will do is eat up a small amount of memory and then go away when the user hits refresh or navigates away. So, if you're a little sloppy about cleaning up your references in general things will still work fine. Where you will run in to problems is when you have a lot of zombie views, say because you rendered a 20x100 table where every cell has its own View.

Now, to truly understand how to avoid zombie views you have to understand how memory works in Javascript. I encourage you to read more about that elsewhere, but here's the cliff notes version: anything you "stop using" will get cleaned up by the browser's garbage collector, and since the garbage collector can't tell exactly when you "stop using" something it actually goes by whether or not that thing has any references to it on other objects.

This is where event bindings come in to play, because they can create references that prevent a view from being garbage collected. One of the features of Backbone is that it handles cleaning up these bindings if they are made as part of a Backbone.View's initialization (ie. the events you put in an events property of the View class). So if you remove a View's element from the page, it will get garbage collected ...

... unless it has some other reference to it, like another object that uses it, or an event binding that you created using jQuery. So, as long as your Views don't have any other references you are correct: simply removing the element will be enough. But if you do have any other references, you will need to clean them up or else the View won't get garbage collected and will become a zombie view.

这篇关于preventing骨干僵尸意见的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！