Backbone - which "this" is "this"?

Question

I'm forced to use Backbone at work though my knowledge is still very limited.

I'm having troubles understanding "this" element - here's an example:

Normally, this would be a piece of jQuery code:

$('.birds').click(function() {
    $(this).fadeOut();
});

What I would like to achieve is when clicking on one element among many with the same class (.birds for example) to be able to perform an action on this specific, clicked element.

I see though that "this" is used very often in the view and I don't even know where to start to make "this" my "this".

I would appreciate a short explanation about what is THIS about in Backbone.

EDIT:

Thank you for the links, I'll read about it. In the meantime - assuming this structure:

events: {
    'click .birds' : 'birdsFunction'
},

birdsFunction: {
    $(this).fadeOut();
}

Is it correctly written or what I consider "this" (the clicked element with .birds class) is not MY "this"?

`$(this)` refers to the selector in your example the selctor is `.birds`. — Bhojendra Rauniyar, Jul 18 '14 at 10:12
It's not actually about `Backbone` or even `jQuery`. It's all about `Javascript` itself. http://stackoverflow.com/questions/3127429/javascript-this-keyword — emerson.marini, Jul 18 '14 at 10:12
I think this is not about backbone, it is about your basic understanding of 'this'. I think this article is very helpful: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/this Cheers! — CunningFatalist, Jul 18 '14 at 10:13
The [MDN](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/this) docs cover `this` very well imo — CodingIntrigue, Jul 18 '14 at 10:13
In your example, `$(this)` refers to the clicked element among (possibly) many containing the `class` birds. If for some reason you need to carry away with this selected element across your code, you could save it in a global variable or something like that. It's hard to give an opinion without seeing the big picture. — emerson.marini, Jul 18 '14 at 10:15
Not only Your knowledge of Backbone is limited but also jQuery knowledge .please goto api.jquery.com. Its about plain jQuery , not backbone — Pratik Joshi, Jul 18 '14 at 10:20
@C-linkNepal I understand well what "this" is in the code that I've written above. I'm wondering how to apply it to the Backbone view, where there are already some "this"s. — user3691280, Jul 18 '14 at 10:23

score 1 · Accepted Answer · answered Jul 18 '14 at 10:35

In the method of Backbone class this is a reference to the object of class. Therefore in the event listener method, if you need to get an access to the DOM Node the event triggered on, use the event argument.

events: {
    'click .birds' : 'birdsFunction'
},

birdsFunction: function(event) {
    // Here (inside the method of class) this will point to current view
    // and not to the DOM node.
    // So let's get this node from event.currentTarget
    // or from event.target property.
    $(event.currentTarget).fadeOut();
}

That's it! I'll go through your answer over and over until I actually understand what happened there, but this is exactly what I meant. Thank you! — user3691280, Jul 18 '14 at 10:40

Backbone - which "this" is "this"?

1 Answers1