coffeescript class noob問題與@var

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像其他方法一樣工作？我打電話是這樣的：coffeescript class noob問題與@var

footerPanel = new FooterPanel() 
footerPanel.hint()

所以顯然我有很多脂肪箭相關的需求。我開始玩胖箭頭（我以前從來沒有用過），它似乎用範圍來解決我的問題。感謝大家！

來源

2012-03-12 Fresheyeball

使用脂肪箭頭（=>）的功能結合到其初始上下文

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

來源

2012-03-12 19:00:56 mpm

好的很清楚我需要閱讀關於這個胖箭頭的概念。 – Fresheyeball 2012-03-12 19:08:01

你必須明白，這個（@）可以改變對回調調用的上下文的依賴。 =>只是一個語法糖，它會創建一個變量_this或一個函數來將上下文綁定到一個對象。檢查編譯的代碼。 – mpm 2012-03-12 19:13:15

在您的hint方法中，將setTimeout (->替換爲setTimeout (=>。這可以確保無論this是什麼時候hint方法被調用進入異步setTimeout調用。

來源

2012-03-12 19:00:09

這有助於我有另一個問題。但我的問題在這裏'userAction： - > @ footer.hover @userMoveUp，@userMoveDown＃this.footer is undefined' – Fresheyeball 2012-03-12 19:03:59

coffeescript class noob問題與@var

回答

相關問題