主干事件委托 eventName 问题

Question

I have a view with a simple enough events object (in coffeescript because it's sweet)

APP.bb.Recipe_Index = Backbone.View.extend

    template: JST['templates/Recipe_Index']

    el: $ "#recipes"

    events:
        'click a' : 'testFunction'

    testFunction: () ->
        console.log 'test called'
        return 'this function'

My events aren't bound. When I get to line 967 in the unminified 0.5.3 Backbone.js file

delegateEvents : function(events) {
  //snip
  for (var key in events) {
    var method = this[events[key]];
    if (!method) throw new Error('Event "' + events[key] + '" does not exist');
    var match = key.match(eventSplitter);
    var eventName = match[1], selector = match[2];
    method = _.bind(method, this);
    eventName += '.delegateEvents' + this.cid;
    if (selector === '') {
      $(this.el).bind(eventName, method);
    } else {
      $(this.el).delegate(selector, eventName, method);  <-- THIS ONE
    }
  }
},

It ends up with incorrect jQuery syntax when I have a breakpoint set in Chrome:

selector == 'a'
eventName == click.delegateEventsview8'
method == 'function() {[native code]}'

The selector is correct, but I'm not sure why on line 963 there is an appendation to my 'click' string which indicates the event type. The method reads out as my console.log method before it's bound with underscore, so that's correct.

The end result is that my events aren't triggered. Wondering what I've hooked up wrong here.

Answer 1

The event name click.delegateEventsview8 is actually a correct value for a jQuery event. Backbone is using the namespaced events functionality of jQuery. ( You can read more about it here )

Backbone is using namespaced events so it can easily unbind all the events it added in its undelegateEvents function. By using a namespace, Backbone can be sure it only unbinds the events it added. That way it won't unbind any events that it didn't add.

undelegateEvents : function() {
  $(this.el).unbind('.delegateEvents' + this.cid);
},

As for why the event isn't triggered, I don't know.

Try manually adding a click event in your render method after the template has been rendered to the view's el and see if it's called then. If not, then you know something is wrong with the selector.

render: function() {
  $(this.el).append(//your template code)
  this.$('a').click(this.testFunction);
}