CoffeeScript: How to use both fat arrow and this?

Question

I have a coffeescript class that has some jquery event listeners. I would like to use the fat arrow => to avoid having to reference the class, but I still need a reference to the element that would usually be used with this. How can I use both?

class PostForm     constructor: ->         $('ul.tabs li').on 'click', =>             tab = $(this)             @highlight_tab(tab)             @set_post_type(tab.attr('data-id'))      highlight_tab: (tab)->         tab.addClass 'active'      set_post_type: (id) ->         $('#post_type_id').val(id) 

Answer 1

CoffeeScript links both this and @ to the outer context, therefore you cannot access the context that jQuery provided (aka the desired "this"). Use event.target instead:

class PostForm     constructor: ->         $('ul.tabs li').on 'click', (event) =>             tab = $(event.target)             @highlight_tab(tab) 

Answer 2

Using evt.currentTarget

You should probably use evt.currentTarget (which is equivalent to this) instead of evt.target (which isn't). If the node that you are tapping for click notifications has child nodes, evt.target might be one of those child nodes instead of the node you added the click handler to.

See http://codepen.io/ddopson/pen/erLiv for a demo of this behavior. (click on the inner red box to see that currentTarget points at the red div while target points at outer blue div that the event handler is registered on)

$('ul.tabs li').on 'click', (event) =>   tab = $(event.currentTarget)   @highlight_tab(tab) 

Answer to the question asked - getting both `=>` and `this`:

You can do the following...

$('ul.tabs li').on 'click', (event) =>   tab = $(` this `)     # MAKE SURE TO ADD THE SPACES AROUND `this`   @highlight_tab(tab) 

The spaces are critical as they prevent Coffee from munching this into _this.

Using `self` and `->`

Alternatively, do the following ...

self = this $('ul.tabs li').on 'click', (event) ->   tab = $(this)   self.highlight_tab(tab) 

This is similar to CQQL's answer, except that I prefer the idiomatic use of self as the variable name; my VIM syntax highlighting rules color self as a "special" variable just as it would for this, arguments, or prototype.