为什么我不能在Backbone的View事件中的一个语句中将单个事件绑定到多个选择器？

Question

I have the following Backbone View:

var View = Backbone.View.extend({
    events: {
      'change [name="title"], change [name="body"]': 'onChangeEvent'
    },

    onChangeEvent: function (e) {
       // fires only for change [name="title"] event
    }
});

I need to bind onChangeEvent method to both change [name="title"] and change [name="body"] events. But onChangeEvent method is invoked only for change [name="title"] event but not for change [name="body"] .

Please help me, what I'm doing wrong?

Answer 1

From the fine manual :

delegateEvents delegateEvents([events])
[...] Events are written in the format {"event selector": "callback"} .

so the event in question is the first space-delimited component of the key in the events object. Applying that to what you have gives 'change' as the event and [name="title"], change [name="body"] as the selector; furthermore, a comma is a multiple selector so your selector (as Backbone sees it) is looking for things with name="title" attributes or <change> elements with name="body" attributes. You don't have any <change> elements but you do have name="title" elements, hence the event triggering behavior you're seeing.

You can use one event entry with a multiple selector:

events: {
  'change [name="title"], [name="body"]': 'onChangeEvent'
  // -------------------^ but no extra 'change'
}

or two separate event entries:

events: {
  'change [name="title"]': 'onChangeEvent',
  'change [name="body"]' : 'onChangeEvent'
}