javascript - 如何将 2 个处理程序附加到同一个事件？

Question

我可以将处理程序附加到主干 View ，例如:

var TodoView = Backbone.View.extend({
    events: {
        "xxx": "eventHandler1"
        "yyy": "eventHandler2"
    }
});

但是如果我想将多个处理程序附加到同一事件怎么办？

var TodoView = Backbone.View.extend({
    events: {
        "xxx": "eventHandler1"
        "yyy": "eventHandler2"
        "xxx": "eventHandler3" // this isn't valid ... at least in CoffeeScript
    }
});

我可以创建一个自定义处理程序，例如

function compositeXXX() { eventHandler1(); eventHandler2 }

但这似乎并不理想......

Answer 1

这个:

events: {
    "xxx": "eventHandler1",
    "yyy": "eventHandler2",
    "xxx": "eventHandler3"
}

不起作用，因为 events 是一个对象文字，并且对象中最多可以有一对(键，值)。这可能与说的是一样的:

events: {
    "xxx": "eventHandler3",
    "yyy": "eventHandler2"
}

这个 CoffeeScript :

events:
    "xxx": "eventHandler1"
    "yyy": "eventHandler2"
    "xxx": "eventHandler3"

在功能上与 JavaScript 版本相同，但由于相同的原因而无法工作。

Andy Ray 的使用想法

'event selector': 'callback1 callback2'`

也不会工作，因为 Backbone 不会理解它应该在空格上分割值；同样，这个:

'event selector': [ 'callback1', 'callback2' ]

不起作用，因为 Backbone 不知道在这种情况下如何处理数组。

View 通过 delegateEvents 绑定(bind)它们的事件看起来像这样:

delegateEvents: function(events) {
  // Some preamble that doesn't concern us here...
  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');
    // And some binding details that are of no concern either...
  }
}

因此方法开始时是“事件选择器”的值。如果它是类似以下内容的函数:

'event selector': function() { ... }

然后按原样使用，否则转换为 this 的属性:

method = this[events[key]]; // i.e. method = this[method]

如果是粗体，则可以调整delegateEvents来理解数组或空格分隔的字符串:

// Untested code.
var methods = [ ];
if (_.isArray(method))
  methods = method;
else if (_.isFunction(method))
  methods = [ method ];
else
  methods = method.split(/\s+/);
for (var i = 0; i < methods.length; ++i) {
  method = methods[i];
  if (!_.isFunction(method))
    method = this[method];
  // And the rest of the binding stuff as it is now with a possible adjustment
  // to the "method does not exist" exception message...
}

像这样的相当简单的补丁将允许您使用空格分隔的处理程序列表:

'event selector': 'callback1 callback2'

或处理程序数组:

'event selector': [ 'callback1', 'callback2' ]

甚至是方法名称和函数的混合数组:

'event selector': [ 'callback_name1', function() { ... }, 'callback_name2' ]

如果您不想修补您的 Backbone 或将此类补丁转发给 Backbone 维护人员，那么您可以采用最初的“手动调度”想法:

'event selector': 'dispatcher'
//...
dispatcher: function(ev) {
    this.handler1(ev);
    this.handler2(ev);
}