Remove all event listeners of a Backbone view
backbone.js, javascript
Solution
Anywhere in your View:
this.undelegateEvents();
You can then manually rebind events at a later time with `delegateEvents();`
- http://backbonejs.org/#View-delegateEvents
- http://backbonejs.org/#View-undelegateEvents
I use a method added to the Backbone.View prototype to easily clean up views:
Backbone.View.prototype.close = function() {
this.undelegateEvents();
this.remove();
}
// internal usage
this.close();
// external usage
myView.close();
EDIT 19/07/2013
Backbone v0.9.9 added the `.listenTo()` method to views, making it easy to unbind external events when the view is removed.
You can read more here:
- Backbone.js - listenTo() documentation
- StackOverflow - Backbone 0.9.9: Difference between ListenTo and on
Problem
Is there a way to remove all event listens instantiated by a backbone view? For example, suppose I have the following HTML/JavaScript. When #box is clicked, I want a pop-up to say hello. ``` <div id="box" style="height: 100px; width: 100px; background-color: red"></div> var Listener = Backbone.View.extend({ el: "#box", events: { 'click #box' : 'hello' }, hello: function () { alert('hello!'); } }) var listener = new Listener(); ``` Now, I want to remove the event listener. Setting listener to something else doesn't work: ``` listener = ''; // doesn't work ``` How do I remove the event listener?