CSS Selector Equivalent Of jQuery.find in backbone.js?

Question

I have a Marionette view that has the following code:

onRender: {
   $('#someDiv').find('a').click(function(){
     // some code here
   });
}

But I want to refactor to something like this:

events: {
  'click [selector here]': 'executeCode'
},

executeCode: function() {
    // some code here
}

Is this possible?

Answer 1

That's actually the recommended way of binding DOM event handlers in Backbone. Backbone uses jQuery on method (event delegation syntax) for binding the event handlers behind the scenes.

Please note that the event handlers work for matching descendants of the View's element. If #someDiv is not a descendant of the View's element then the event handler won't work.

It should also be noted that this in the context of the handler refers to the View object not the target element of the event:

events: {
  'click #someDiv a': 'executeCode'
},

executeCode: function(event) {
   // `this` here refers to the View object 
   var clickedElement = event.currentTarget;
   // ...
}

The above snippet works like the following snippet:

viewObject.$el.on('click', '#someDiv a', viewObject.executeCode.bind(viewObject));

Answer 2

Yes, use a space

events: {
  'click #someDiv a': 'executeCode'
},

Also, see http://backbonejs.org/#View-delegateEvents