如何正确破坏骨干上的观点？

Question

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

我使用这种方法来破坏视图

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

这个问题是,如果我这样做应用程序崩溃,所以你建议我做什么:)

Answer 1

我是这样做的:

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

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

首先,我们要确保删除所有委托事件(events:{"event selector": "callback"}哈希中的事件).我们这样做是为了避免内存泄漏,并且没有神秘的绑定,以后会意外触发.undelegateEvents()是一个Backbone.View原型函数,用于删除视图的委托事件.简单.

接下来,我们要清理悬挂在视图对象中的任何数据,并取消绑定我们绑定在事件哈希之外的任何事件.jQuery提供了一个removeData()函数,允许我们这样做.您也可以将视频链unbind()绑定到事件监听器,不带任何参数从$ el中删除所有以前连接的事件处理程序.this.$el.removeData().unbind();

现在你可能想在这里做两件事之一.您可能希望完全删除视图元素,或者您只想删除在其生命周期中附加到其上的所有子元素.例如,如果您将视图的$ el设置为视图行为完成后应保留的DOM元素,则后者将是合适的

在前一种情况下,this.remove()将删除您的视图元素,它是来自DOM的子元素.

在后一种情况下,this.$el.empty()将删除所有子元素.

如果你想愚弄我的解决方案,请查看这个小提琴. http://jsfiddle.net/oakley349/caqLx10x/