Coffeescript objects, jquery callback and variable scope conflicts and confusion

Question

Trying to find out best approach to have this work:

class Person

  constructor: (@el) ->
    @el = $(el)
    this.bind()

  bind: ->
    @el.find('.something').on 'click', ->
      $(this).hide()       # conflict!
      this.do_something()  # conflict!

  do_something: ->
    alert 'done!'

I'm aware I can use the hash rocket (=>) and then access this.do_something from within my callback, but then that conflicts with callback 'this', and so jquery is trying to select object, not element '.something'. How to resolve this?

Rob W · Accepted Answer · 2013-04-17 15:09:32Z

3

You can't get this to refer to different objects. Use a different identifier, by storing the instance's this reference in an auxiliary variable:

  bind: ->
    person = this
    @el.find('.something').on 'click', ->
      $(this).hide()
      person.do_something()

answered Apr 17, 2013 at 15:09

Rob W

350k87 gold badges811 silver badges683 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

user419017 Over a year ago

That's the best approach? Thanks btw.

Rob W Over a year ago

@Zenph Yes, that's the best (most readable) approach. You cannot use this to point to different objects in the same context.

user419017 Over a year ago

I understand context ;) Was hoping either CS or jQuery had a proxy variable to this for such conflicts.

jgphilpott Over a year ago

It works but is still annoying, I wish CoffeeScript classes used something like self rather than this!

Collectives™ on Stack Overflow

Coffeescript objects, jquery callback and variable scope conflicts and confusion

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related