[javascript] 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?

This question is related to javascript javascript-events backbone.js

The answer is


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.


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.


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

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

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

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


I think this should work

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

Examples related to javascript

need to add a class to an element How to make a variable accessible outside a function? Hide Signs that Meteor.js was Used How to create a showdown.js markdown extension Please help me convert this script to a simple image slider Highlight Anchor Links when user manually scrolls? Summing radio input values How to execute an action before close metro app WinJS javascript, for loop defines a dynamic variable name Getting all files in directory with ajax

Examples related to javascript-events

How to fire an event on class change using jQuery? how to toggle (hide/show) a table onClick of <a> tag in java script How to pass parameter to function using in addEventListener? Open popup and refresh parent page on close popup How to remove all listeners in an element? Destroy or remove a view in Backbone.js Add event handler for body.onload by javascript within <body> part How to trigger jQuery change event in code How can I trigger an onchange event manually? Intercept page exit event

Examples related to backbone.js

Uncaught SyntaxError: Failed to execute 'querySelector' on 'Document' JavaScript console.log causes error: "Synchronous XMLHttpRequest on the main thread is deprecated..." Error: getaddrinfo ENOTFOUND in nodejs for get call npm install error from the terminal Lodash .clone and .cloneDeep behaviors Bootstrap - Uncaught TypeError: Cannot read property 'fn' of undefined Angular.js vs Knockout.js vs Backbone.js How to convert 1 to true or 0 to false upon model fetch Origin http://localhost is not allowed by Access-Control-Allow-Origin What is two way binding?