So Im new at backbone, and Im trying to make a single page app, Im using routes to manage certain things, and I want to remove a view when the user gets to another route

Im using this method to destroy the view

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

}

also this is my route element

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

the problem with this is that if I do this the app crashes, so what do you remend me to do :)

So Im new at backbone, and Im trying to make a single page app, Im using routes to manage certain things, and I want to remove a view when the user gets to another route

Im using this method to destroy the view

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

}

also this is my route element

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

the problem with this is that if I do this the app crashes, so what do you remend me to do :)

• javascript
• backbone.js

• 1 this.remove(); and Backbone.View.prototype.remove.call(this); is the same. So the first line actually removes the view element from DOM and does the clean up. Then you call remove() again with the second line, which might throw some errors and cause your app to crash. – T J Commented Oct 21, 2015 at 18:48

1 Answer 1

Here’s how I do it:

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

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

First we want to make sure we’re removing all delegated events (the ones in the events:{"event selector": "callback"} hash). We do this so we can avoid memory leaks and not have mystery bindings that will fire unexpectedly later on. undelegateEvents() is a Backbone.View prototype function that removes the view’s delegated events. Simple.

Next we want to cleanup any data in the view object that is hanging around and unbind any events that we bound outside the events hash. jQuery provides a removeData() function that allows us to to do that. You may also have bound event listeners to your view chain unbind() with no arguments to remove all previously-attached event handlers from your $el. this.$el.removeData().unbind();

Now you may want to do one of two things here. You may want to remove your view element pletely OR you just want to remove any child elements you’ve appended to it during it’s life. The latter would be appropriate if, for example, you’ve set the $el of your view to be some DOM element that should remain after your view behavior is plete

In the former case, this.remove() will obliterate your view element and it’s children from the DOM.

In the later case, this.$el.empty() will remove all child elements.

Check out this fiddle if you want to fool around with my solution. http://jsfiddle/oakley349/caqLx10x/