Javascript 如何正确销毁主干上的视图？_Javascript_Backbone.js

Javascript 如何正确销毁主干上的视图？

javascript backbone.js

Javascript 如何正确销毁主干上的视图？,javascript,backbone.js,Javascript,Backbone.js,所以我是主干网的新手，我尝试制作一个单页应用程序，我使用路由来管理某些事情，我想在用户到达另一条路由时删除一个视图我正在使用此方法破坏视图 destroy_view: function() { // COMPLETELY UNBIND THE VIEW this.undelegateEvents(); this.$el.removeData().unbind(); // Remove view from DOM this.remove();

所以我是主干网的新手，我尝试制作一个单页应用程序，我使用路由来管理某些事情，我想在用户到达另一条路由时删除一个视图

我正在使用此方法破坏视图

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);

}

这也是我的路线元素

Router = Backbone.Router.extend({
        routes: {
            '':'index',
            '#':'index',
            'events/*event' : 'events'
        },
        index: function(){
            this.indexView = new VistaIndex();
        },
        events: function(params) {
            if( this.indexView )
                this.indexView.destroy_view()
            this.eventView = new EventView({currentEvent: params})
        }
    });

问题是，如果我这样做，应用程序会崩溃，那么你建议我怎么做：）

我是这样做的：

  Backbone.View.extend({
      //some other view stuff here...
      destroy: function () {
          this.undelegateEvents();
          this.$el.removeData().unbind();

          this.remove();
          //OR
          this.$el.empty();
      }
  });

首先，我们要确保删除所有委派事件（在

事件：{“事件选择器”：“回调”}

散列中的事件）。我们这样做是为了避免内存泄漏，并且不会有稍后意外触发的神秘绑定

undelegateEvents（）

是一个主干.View原型函数，用于删除视图的委派事件。简单

接下来，我们要清理视图对象中挂起的任何数据，并解除绑定到事件哈希之外的任何事件的绑定。jQuery提供了一个removeData（）函数，允许我们这样做。您还可以将事件侦听器绑定到视图链unbind（），而不使用任何参数从$el中删除所有以前附加的事件处理程序<代码>此。$el.removeData（）.unbind（）

现在你可能想做两件事中的一件。您可能希望完全删除视图元素，或者只希望删除在其生命周期中附加到它的所有子元素。例如，如果您已将视图的$el设置为某个DOM元素，并且该元素应在视图行为完成后保留，则后者将是合适的

在前一种情况下，

this.remove（）

将从DOM中删除视图元素及其子元素

在后一种情况下，

this.$el.empty（）

将删除所有子元素

如果你想玩弄我的解决方案，看看这把小提琴。

我是这样做的：

  Backbone.View.extend({
      //some other view stuff here...
      destroy: function () {
          this.undelegateEvents();
          this.$el.removeData().unbind();

          this.remove();
          //OR
          this.$el.empty();
      }
  });

首先，我们要确保删除所有委派事件（在

事件：{“事件选择器”：“回调”}

散列中的事件）。我们这样做是为了避免内存泄漏，并且不会有稍后意外触发的神秘绑定

undelegateEvents（）

是一个主干.View原型函数，用于删除视图的委派事件。简单

在前一种情况下，

this.remove（）

将从DOM中删除视图元素及其子元素

在后一种情况下，

this.$el.empty（）

将删除所有子元素

如果你想玩弄我的解决方案，看看这把小提琴。

哦，谢谢你的工作，现在让我们发现新的问题：）AngelRomeroHerrera考虑接受他的回答，所以其他有类似问题的人可以找到它：但是主干的代码>删除< /Cord>调用，这些调用将自行处理数据和事件。还负责el中的数据和事件。您还缺少一个

停止监听

呼叫。经验法则：使用

listenTo

，不要将视图绑定到现有的

el

s，并通过调用

remove

进行清理；如果有要清理的子项，则在链接到标准的

remove

实现之前，覆盖

remove

以调用

remove

。请参阅。您应该根据上述评论更新答案

remove（）

从

DOM

中删除视图元素。故事结束了。进一步调用

removeData（）

，

unbind（）

，

undelegateEvents（）

等都是没有用的，除非你出于奇怪的原因做了一些有趣的事情，比如保留对已删除元素的引用。我不知道

$.removeData（）.unbind（）

非常酷！谢谢哦，谢谢这个工作，现在让我们发现新的问题：）AngelRomeroHerrera考虑接受他的答案，所以其他有类似问题的人可以找到它：但是主干的<代码>移除< /Cord>调用，这些调用将自行处理数据和事件。还负责el中的数据和事件。您还缺少一个

停止监听