javascript - tutorial - Enlazar múltiples tipos de eventos en vistas de red troncal

backbonejs github

Question

Me preguntaba si es posible vincular múltiples tipos de eventos en la red troncal dentro de una sola línea.

Considera lo siguiente:

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

Básicamente, lo que me pregunto es si es posible combinar el enlace del evento para ''clic'' y ''toque inicial'' en una línea, en la línea de:

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

Cualquier sugerencia sera apreciada.

Answer 1

Es imposible para las vistas de los eventos de jQuery, que están vinculados a través de delegateEvents . Sin embargo, es posible para los eventos principales :

book.on("change:title change:author", ...);

Answer 2

Para cualquier persona interesada terminé anulando delegateEvents en Backbone.View.

Solo hay unas pocas líneas modificadas para obtener la funcionalidad deseada.

Puedes ver un diff en mi commit en github

Aquí está delegateEvents en su estado modificado:

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

Answer 3

También podríamos hacerlo como a continuación. Con la ventaja de gestionar el espacio entre cada evento.

Github se compromete aquí

Agregarlo en Backbone directamente:

delegateEvents: function(events) {
  events || (events = _.result(this, ''events''));
  if (!events) return this;
  this.undelegateEvents();
  for (var key in events) {
    var method = events[key];
    if (!_.isFunction(method)) method = this[method];
    if (!method) continue;
    var match = key.match(delegateEventSplitter);
    this.delegate(match[1], match[2], _.bind(method, this));
  }
  return this;
}

Anular el método delegateEvents:

Backbone.View.prototype.originalDelegateEvents = Backbone.View.prototype.delegateEvents;
Backbone.View.prototype.delegateEvents = function(events) {
    events || (events = _.result(this, ''events''));
    if (!events) return this;
    this.undelegateEvents();
    for (var key in events) {
        var method = events[key], combinedEvents = key.split('','');
        if (!_.isFunction(method)) method = this[method];
        if (!method) continue;

        for(var i = 0, match = null; i < combinedEvents.length; ++i) {
            match = combinedEvents[i].trim().match(/^(/S+)/s*(.*)$/);
            this.delegate(match[1], match[2], _.bind(method, this));
        }
    }
    return this;
};

Ahora podemos gestionar eventos en una línea:

events: { 
    ''click a[data-anchor], wheel, keydown'': ''scroll''
}