销毁或删除Backbone.js中的视图


83

我目前正在尝试为视图实现destroy / remove方法,但无法获得通用的解决方案以对所有视图起作用。

我希望会有一个事件附加到控制器,以便当有新请求通过时,它会破坏先前的视图,然后加载新的视图。

有什么方法可以做到,而不必为每个视图构建删除功能?


您能否举例说明您的观点生态系统是什么?您的问题使我认为页面上一次有很多视图。我无法完全想象您要做什么,因此无法提供您所需的答案。
Bill Eisenhauer'7

Answers:


47

在不知道所有信息的情况下...您可以将重置触发器绑定到模型或控制器:

this.bind("reset", this.updateView);

当您想重置视图时,触发重置。

对于您的回调,请执行以下操作:

updateView: function() {
  view.remove();
  view.render();
};

5
我认为这是不对的。视图的删除功能只是从DOM中删除该视图的元素(请参见此处)。我认为这个家伙想完全删除视图对象。
营养师

2
this.remove()最终调用的jQuery的remove(),这也将删除数据和事件......不过我想你也必须调用this.undelegateEvents解除绑定其他活动,如自定义事件或更改模型..
opensas 2012年

21
this.remove()呼叫this.stopListening()this.$el.remove()。第一个将删除使用添加的所有事件侦听器this.listenTo(...)。第二个删除所有使用jQuery添加的事件侦听器。在这两者之间,除非您使用其他添加事件侦听器的方法,否则您应该被覆盖。因此,这个答案是正确的,并向我+1。
chowey

162

我必须绝对确保视图不仅从DOM中删除,而且还完全不受事件约束。

destroy_view: function() {

    // COMPLETELY UNBIND THE VIEW
    this.undelegateEvents();

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

    // Remove view from DOM
    this.remove();  
    Backbone.View.prototype.remove.call(this);

}

在我看来,这似乎太过分了,但是其他方法并不能完全解决问题。


10
对于我所看到的,this.remove()应该调用jQuery的remove,它应该从DOM中删除该元素,但还要删除附加到它的数据和事件。因此,我认为对undelegateEvents和removeData的调用应该不是必需的...对吗?
打开时间:2012年

1
尽管元素已从DOM中删除,但@opensas事件仍持续通过this.remove()。要取消绑定所有事件,需要this.undelegateEvents()。正如我说的那样,这感觉有点过分,但是却成功了。
sdailey 2012年

3
我喜欢。即使您应该使用this.$el而不是$(this.el);)
mreq 2012年

3
+1为我的问题提供了一个很好的答案,+ 1为您撰写了第一个答案:)
1nfiniti 2012年

1
我的观点并没有在销毁和重新创建它时得到重新呈现。是因为this.remove()吗?
Raeesaa 2014年

20

我知道我晚会晚了,但是希望这对其他人有用。如果您使用的是骨干v0.9.9 +,则可以使用,listenTo并且stopListening

initialize: function () {
    this.listenTo(this.model, 'change', this.render);
    this.listenTo(this.model, 'destroy', this.remove);
}

stopListening由自动调用remove。你可以在这里这里阅读更多


8

这就是我一直在使用的。尚未发现任何问题。

destroy: function(){
  this.remove();
  this.unbind();
}

4

根据当前的主干文档。

view.remove()

从DOM中删除视图及其el,并调用stopListening删除视图具有listenTo'd的所有绑定事件。


0

我认为这应该工作

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

还必须杀死听众this.stopListening(),然后return this采取充分措施
布兰登

0

您可以使用解决问题的方法!

initialize:function(){
    this.trigger('remove-compnents-cart');
    var _this = this;
    Backbone.View.prototype.on('remove-compnents-cart',function(){
        //Backbone.View.prototype.remove;
        Backbone.View.prototype.off();
        _this.undelegateEvents();
    })
}

另一种方法:创建一个全局变量,如下所示:_global.routerList

initialize:function(){
    this.routerName = 'home';
    _global.routerList.push(this);
}
/*remove it in memory*/
for (var i=0;i<_global.routerList.length;i++){
    Backbone.View.prototype.remove.call(_global.routerList[i]);
}

第一种方法对我有用,我遇到了一个类似的问题,即视图重影,当您提交表格时,每次重新创建视图时,事件都会触发多次
ONYX
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.