jquery $(this) not working with coffeescript and backbone - backbone.js

Question

$(this) is not working with cofeescript and backbone.Its generating valid code but I don't understand why it was not working. For work around I used $(event.target).
Jobmatch.Views.Jobs ||= {}
class Jobmatch.Views.Jobs.JobView extends Backbone.View
template: JST["recommendation/templates/jobs/job"]
initialize: () ->
#ajs = new Jobmatch.Collections.ApplicantJobsCollection()
#ajs.reset(#options.applicant_jobs || [])
#aj = new #ajs.model()
#index = #options.index || 0
events:
"click .job_apply" : "apply"
tagName: "tr"
apply: (event)->
target = $(this) // As this is not working as I expected,So I used below line.
target = $(event.target)
if #options.user_jobmatch_valid
#ajs.create({job_id: #model.get('id') })
target.parents("a.job_apply").prev().click();
else
target.parents("a.job_apply").next().click();
false
render: ->
$(this.el).html(#template(#model.toJSON()))
#
And this cofeescript has generated following code:
JobView.prototype.apply = function(event) {
var target; target = $(this); // not working it is not elementt object
target = $(event.target);// this is element object ,working fine
target.parents("a.job_apply").prev().click();
};

Answer 1

In the backbone documentation, http://backbonejs.org/#View-delegateEvents
It states clearly:
All attached callbacks are bound to the view before being handed off
to jQuery, so when the callbacks are invoked, this continues to refer
to the view object.
This resolves one of the issues that many object-oriented programmers have with jQuery, that it overrides the context in all its event handlers. As stated earlier you can often use the event, which is passed as the handler's argument. However, event.target can often refer to child elements as opposed to this, which always refers to the element selected with the query. For instance:
<b>my link</b>
$('a').on('click', myfunction); function myfunction(event) {
this // refers to the "a" element
event.target // refers to the "b" element
}
In these cases, when attaching mouse events with Backbone to elements with children, use event.currentTarget to get a reference to the element that the event handler was attached to.
events: {
"click a" : "myFunction" },
...
function myFunction(event) {
var $this = $(event.currentTarget);
// Now, $this is the same as jQuery's $(this)
}

Answer 2

it all depends on the context,
this is in certain cases bound to your view itself,
take this example:
var myView = Backbone.View.extend({
events: { "click a" : "myfunction" },
initialize: function(){
_.bindAll(this, 'render', 'myfunction');
},
render: function(){
// rendering data here...
},
myfunction: function(e){
console.log(e.target); // will log the clicked DOM element => <a>
console.log(this); // will log the view => myView
}
});
window.v = new myView({ el : $('#mydiv') });
window.v.render();
as you can see, if you should run this example, you can see the differences between this and e.target. however, this is all due to the keyline in the initialize method.
_.bindAll(this, 'methodname', [ methodnames ] );
this binds the view to this when in 1 of the given methods.
if you would remove myfunction from that list, console.log(this); would log the element itself.
but, you would not be able to reach data or functions from your view....
you are free to chose if you bind the view in to this.

Answer 3

With events bound through a Backbone view, this will be set to the view itself. This is different from normal jQuery where this refers to the DOM element
So in a Backbone view:
events: { "click a" : "myfunction" },
...
function myfunction(e) {
this // refers to the view
e.target // refers to the element
}
Whereas in normal jQuery:
$('a').on('click', myfunction);
...
function myfunction() {
this // refers to the element
e.target // also refers to the element
}
In both cases, you can use e.target to refer to the element