25

我可以将处理程序附加到主干视图，例如：

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 }

但这似乎并不理想...

4

2 回答 2

36

这个：

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

不起作用，因为events它是一个对象文字，并且您最多可以在一个对象中有一个 (key,value) 对。这可能与说：

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

这个咖啡脚本：

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

在功能上与 JavaScript 版本相同，并且出于相同的原因无法工作。

Andy Ray 的使用理念

'event selector': 'callback1 callback2'`

也不起作用，因为 Backbone 不明白它应该在空格上拆分值；同样，这：

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

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

视图通过绑定它们的事件delegateEvents，看起来像这样：

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

所以method从 的值开始'event selector'。如果它是来自以下内容的函数：

'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);
}
于 2012-06-06T15:46:35.540 回答
9

我通过使用jQuery 的事件命名空间解决了这个问题

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

这不是事件名称空间最初的用途，但只要它们不与其他名称空间发生冲突，就不会造成问题。

主要问题是对象中的每个键只能有一个值，这使得键是唯一的。

于 2013-04-28T18:13:52.250 回答