Search code examples
javascriptbackbone.jsbackbone-eventsbackbone-views

Binding multiple event types in backbone views


I was wondering if it is possible to bind multiple event types in backbone within a single line.

Consider the following:

var MyView = Backbone.View.extend({
    id: 'foo',
    events: {
        'click .bar': 'doSomething',
        'touchstart .bar': 'doSomething'
    },
    doSomething: function(e) {
        console.log(e.type);
    }
});

Basically what I am wondering is if it is possible to combine the event binding for 'click' and 'touchstart' into one line - along the lines of:

events: { 'click,touchstart .bar': 'doSomething' }

Any suggestions would be appreciated.


Solution

  • For anyone interested I ended up overriding delegateEvents in Backbone.View.

    There are only a few modified lines to get the desired functionality.

    You can see a diff in my commit on github

    Here is delegateEvents in its modified state:

    delegateEvents: function(events) {
        if (!(events || (events = getValue(this, 'events')))) return;
        this.undelegateEvents();
        for (var key in events) {
            var method = events[key];
            if (!_.isFunction(method)) method = this[events[key]];
            if (!method) throw new Error('Method "' + events[key] + '" does not exist');
            var match = key.match(delegateEventSplitter);
            var eventTypes = match[1].split(','), selector = match[2];
            method = _.bind(method, this);
            var self = this;
            _(eventTypes).each(function(eventName) {
                eventName += '.delegateEvents' + self.cid;
                if (selector === '') {
                  self.$el.bind(eventName, method);
                } else {
                    self.$el.delegate(selector, eventName, method);
                }
            });
        }
    }