класс noob в coffeescript с @var

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

В последней строке моего класса я получаю this.footer не определен в моем журнале (при наведении курсора). Как я могу заставить @footer работать так же, как и в других методах? Я звоню так:

footerPanel = new FooterPanel()
footerPanel.hint()

Так что, очевидно, у меня было много потребностей, связанных с жирной стрелой. Я начал играть с жирной стрелкой (я никогда не использовал ее раньше), и это, кажется, решило мои проблемы с областью действия. Спасибо всем!

Answer 1

Используйте жирную стрелку (=>), чтобы связать функцию с ее начальным контекстом

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

Answer 2

В вашем методе hint замените setTimeout (-> на setTimeout (=>. Это гарантирует, что все, что будет this при вызове вашего метода hint, будет перенесено в асинхронный вызов setTimeout.