Skip to content

Instantly share code, notes, and snippets.

@gryzzly
Created May 16, 2012 23:54
Show Gist options
  • Save gryzzly/2714998 to your computer and use it in GitHub Desktop.
Save gryzzly/2714998 to your computer and use it in GitHub Desktop.
Using handleEvent with Backbone

Combining handleEvent and Backbone

I'm sure for most of you it's the old news, but here's a short reminder anyway:

song = {
	handleEvent: function (event) {
    	switch (event.type) {
          case: "click":
          	console.log(this.name);
          	break;
	},
    name: "Yesterday"
};

songNode.addEventListener("click", song, false);

We can use an object obj that has handleEvent property as a handler on any DOM object to catch its events and have event handler's context set to that object obj without the use of Function.prototype.bind.

This comes in handy when working with Backbone:

var SongView = Backbone.View.extend({
	handleEvent: function (e) {
    	switch (e.type) {
            case "loadeddata": 
                this.trigger('loaded');
                break;
            case "ended":
                this.trigger('ended');
                break;
            case "error":
                this.trigger('error');
                break;
        }
	},
	initialize: function () {
    	var events = ['loadeddata', 'ended', 'error'];
        _.forEach(events, function (eventType) {
            this.el.removeEventListener(eventType, this, false);
            this.el.addEventListener(eventType, this, false);
        }, this);
	}
});

Following the example above eliminates the need to bind all DOM events handlers (saving on many closures), places the event handling logic in one place and allows for easy removal of previously set handlers, without repetitively storing refences to these handlers.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment