Question

class FooterPanel

    constructor : -> # @footer works fine in the constructor
      #gather elements
      @footer        = $('footer')
      @panel         = $('ul.panel')

      #initalize states
      @isPanelUp     = false
      @userActed     = false

      #setting
      @panelSpeed    = 500

      #show panel
      @panel.filter('#'+run+'Panel').show()

      @userAction()

      #mobile love
      if device.android
        @panel.find('a').bind 'touchstart', ->
          $(this).click()

      if device.mobile
        @panel.remove()
        return false

      if device.is
        touchToggle = true
        touchTime   = null
        @footer.find('nav').bind 'touchstart', (e) ->

          return true if $(e.target).is('a')

          if touchToggle
            @userMoveUp()
            touchToggle = false
            clearTimeout touchTime
            touchTime = setTimeout @userMoveDown, 3000
          else
            @userMoveDown()
            clearTimeout touchTime
            touchToggle = true

    hint : -> # @footer has not problem working here
      setTimeout (->
        if @isPanelUp and not @userActed
          @footer.stop().animate bottom  : @panel.outerHeight() * -1, @panelSpeed, ->
            @footer.removeAttr 'style'
          @isPanelUp = false
      ), 5000
      if not @isPanelUp and not @userActed
        @footer.stop().animate bottom : 0, @panelSpeed
        @isPanelUp   = true

    userMoveUp : ->
      @userActed = true
      @footer.stop().animate bottom  : 0, @panelSpeed if not @isPanelUp
      @isPanelUp = true

    userMoveDown : ->
      if @isPanelUp
        @footer.stop().animate bottom  : @panel.outerHeight() * -1, @panelSpeed, ->
          @footer.removeAttr 'style'
      @isPanelUp = false

    userAction : ->
      @footer.hover @userMoveUp, @userMoveDown # this.footer is undefined

On the last line there of my class, I get this.footer is undefined in my log (on hover). How can I make @footer work like it does in the other methods? I am calling like this:

footerPanel = new FooterPanel()
footerPanel.hint()

So apparently I had many fat arrow related needs. I started playing with the fat arrow (I had never used it before) and it seems to fix my issues with scope. Thanks everyone!

Answer 1

Use the fat arrow (=>) to bind the function to its initial context

userMoveUp : =>
  @userActed = true
  @footer.stop().animate bottom  : 0, @panelSpeed if not @isPanelUp
  @isPanelUp = true

userMoveDown : =>
  if @isPanelUp
    @footer.stop().animate bottom  : @panel.outerHeight() * -1, @panelSpeed, ->
      @footer.removeAttr 'style'
  @isPanelUp = false