CODEWITHSUNDEEP
javascriptbackbone.jsbackbone-events
Ad Taylor
Ad Taylor

Reputation: 2775

Destroy or remove a view in Backbone.js

I'm currently trying to implement a destroy/remove method for views but I can't get a generic solution to work for all my views.

I was hoping there would be an event to attach to the controller, so that when a new request comes through it destroys previous views then loads the new ones.

Is there any way to do this without having to build a remove function for each view?

Upvotes: 85

Views: 112465

Answers (7)

Deot
Deot

Reputation: 1

You could use the way to solve the problem!

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

Another way：Create a global variable,like this:_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]);
}

Upvotes: 0

Dre
Dre

Reputation: 2172

According to current Backbone documentation....

view.remove()

Removes a view and its el from the DOM, and calls stopListening to remove any bound events that the view has listenTo'd.

Upvotes: 4

Chhorn Ponleu
Chhorn Ponleu

Reputation: 21

I think this should work

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

Upvotes: 0

sdailey
sdailey

Reputation: 2030

I had to be absolutely sure the view was not just removed from DOM but also completely unbound from events.

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

}

Seemed like overkill to me, but other approaches did not completely do the trick.

Upvotes: 162

Bassam Mehanni
Bassam Mehanni

Reputation: 14944

I know I am late to the party, but hopefully this will be useful for someone else. If you are using backbone v0.9.9+, you could use, listenTo and stopListening

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

stopListening is called automatically by remove. You can read more here and here

Upvotes: 20

JT703
JT703

Reputation: 1311

This is what I've been using. Haven't seen any issues.

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

Upvotes: 8

joshvermaire
joshvermaire

Reputation: 1475

Without knowing all the information... You could bind a reset trigger to your model or controller:

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

and when you want to reset the views, trigger a reset.

For your callback, do something like:

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

Upvotes: 48

Related Questions