2012-01-15 69 views
20

在Coffeescript中重寫我的站點的前端。我瞭解如何將點擊功能綁定到類。CoffeeScript - 使用JQuery綁定單擊事件以動態加載對象

$('.song').click -> 
    //code 

但是,我遇到了動態加載內容的一些問題。我知道在jQuery的解決,這將是使用「開」功能,像這樣:

$(document).on('click', '.song', function(){ 
    //code 
}); 

但我這是如何轉化爲CoffeeScript的不確定。我的印象是,箭頭 - >轉化爲JavaScript中的匿名函數,但如果函數是其中一個參數,它如何工作?我已經嘗試了很多不同的語法,但它們都不起作用,謝謝!

回答

15
$(document).on('click', '.song', (-> 
    ### code ### 
)); 

轉化爲這個JavaScript:

$(document).on('click', '.song', (function() { 
    /* code */ 
})); 

請注意,您可能需要使用=>運營商,而不是->;使用雙箭頭還將this綁定到事件處理程序(相當於使用jQuery的bind)。

+0

@Epeli,雖然您的編輯也是一種可能性,但這不是我的偏好。根據函數的內容,CS無法找到最終結果,這可以通過明確地加上大括號來解決。我發現CS令人討厭的含糊之處; '$(document).on'例如返回'on'而不調用它,'do $(document).on'調用它,'$(document).on something'也調用它,'do $(document)一些東西會調用結果。對參數使用明確的大括號使得這種麻煩更少出現錯誤恕我直言。因此我會編輯回來。隨意張貼你自己的 - 我會upvote它。 ;) – Lucero 2012-01-15 22:03:37

+0

羅傑和對不起。編輯看起來相當明顯,因爲如果代碼執行順序清晰,您很少會看到帶括號的CS代碼。就像這個微不足道的例子。 – Epeli 2012-01-15 22:15:18

+0

@Epeli,夠公平的,這就是我解釋自己的原因。在模塊化SPA中運行了數千行CS代碼,並看到我的開發人員正在努力解決某些解釋的行爲,因此我決定在組織中要求方法調用的對象,同時我禁止使用「do '。這實際上有助於保持代碼質量,特別是在代碼維護期間。 – Lucero 2012-01-15 22:19:29

4

JS2Coffee可以用這些類型的問題有所幫助:

http://js2coffee.org/

您需要與js2coffee小心一點,因爲它有時蹣跚而相當棘手的JS代碼,但它是出奇的準確,它會通常至少讓你相當接近。

21

通常,如果沒有它們,執行順序是明確的,那麼在CoffeeScript中通常不使用括號。所以這可以寫成這樣:

$(document).on 'click', '.song', -> 
    ### code ### 

但是,當然執行順序不明顯時總是使用括號。

+0

這應該是**答案! – mlt 2016-11-01 19:16:27

相關問題