在主干视图中绑定多个事件类型

Binding multiple event types in backbone views

本文关键字：事件 类型 绑定 视图      更新时间：2023-09-26

我想知道是否可以在一行内在主干中绑定多个事件类型。

请考虑以下事项：

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

基本上我想知道的是是否可以将"单击"和"触摸启动"的事件绑定合并到一行中 - 如下所示：

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

任何建议将不胜感激。

视图 jQuery 事件是不可能的，这些事件通过 delegateEvents 绑定。不过，骨干事件是可能的：

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

对于任何感兴趣的人，我最终覆盖了Backbone.View中的delegateEvents。

只需修改几行即可获得所需的功能。

你可以在我在 github 上的提交中看到差异

以下是处于修改状态delegateEvents：

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

我们也可以按如下方式进行操作。具有管理每个事件之间的空间的优势。

Github在这里提交

直接将其添加到骨干中：

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

覆盖委托事件方法：

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

我们现在可以在一行中管理事件：

events: { 
    'click a[data-anchor], wheel, keydown': 'scroll'
}
相关文章：