web-dev-qa-db-fra.com

Reliure de multiples types d'événements dans les vues de dorsale

Je me demandais s'il est possible de lier plusieurs types d'événements dans la colonne vertébrale dans une seule ligne.

Considérer ce qui suit:

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

Fondamentalement, ce que je me demande, c'est s'il est possible de combiner la liaison de l'événement pour "Cliquez" et "Touchstart" en une seule ligne - dans le sens de:

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

Toute suggestion serait appréciée.

javascriptbackbone.jsbackbone-eventsbackbone-views
28
stephenmuss

Il est impossible pour vues JQuery Events, qui sont liés delegateEvents . C'est possible pour les événements de la colonne vertébrale , cependant:

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

Nous pourrions également le faire comme ci-dessous. Avec l'avantage de gérer l'espace entre chaque événement.

Github s'engage ici

Ajoutez-le directement dans la colonne vertébrale:

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

Présélectionnez la méthode des délégateurs:

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

Nous pourrions maintenant gérer des événements dans une ligne:

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