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?
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.
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();
};
this.remove()
calls this.stopListening()
and this.$el.remove()
. The first removes all event listeners added using this.listenTo(...)
. The second removes all event listeners add using jQuery. Between the two, you should be covered unless you used some other means of adding event listeners. So this answer is correct and gets +1 from me.
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
This is what I've been using. Haven't seen any issues.
destroy: function(){
this.remove();
this.unbind();
}
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.
I think this should work
destroyView : function () {
this.$el.remove();
}
this.stopListening()
and then return this
for good measure
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]);
}
Success story sharing
this.$el
instead of$(this.el)
;)this.remove()
?