將事件處理程序添加到coffeescript類的jQuery滑塊

我是一個coffeescript newbee想在一個客戶端視圖中使用多個jQuery滑塊。我想爲幾個函數使用滑動事件。滑塊顯示，該值在開始時顯示，滑塊可用，但事件未使用。將事件處理程序添加到coffeescript類的jQuery滑塊

class Slider 
constructor: (@min, @max, @value, @id) -> 
    d3.select(@id).attr("style", "width: 500px; margin: 15px;") 
    @myslider = $(@id).slider 
    min: @min 
    max: @max 
    value: @value 
    $(@id).bind 
    slide: @slideme 

slideme: (event, ui) => 
    $(@id +"_data").val(@value) 

$(document).ready -> 
    slider1 = new Slider(0,800,100,'#testslider') 
    $("#testslider_data").val($("#testslider").slider("value"))

當我使用滑塊時，我需要做什麼具有幻燈片中顯示的幻燈片值？

來源

2013-01-08 tbecker

您的縮進已關閉。這：

$(@id).bind 
slide: @slideme

應該是這樣的：

$(@id).bind 
    slide: @slideme

或：

$(@id).bind slide: @slideme

或我個人最喜歡的：

$(@id).bind(slide: @slideme)

的CoffeeScript是空白字符和格式非常敏感，你的格式定義了大部分你的代碼的結構如此，你必須小心和一致的必須;你爲縮進混合了一個和兩個空格，這隻會造成麻煩。

您的原始代碼：

constructor: (@min, @max, @value, @id) -> 
    #... 
    $(@id).bind 
slide: @slideme

將看到類似這樣的：

constructor: (@min, @max, @value, @id) -> 
    #... 
    $(@id).bind 

slide: @slideme

所以你那是爲bindslide: @slideme參數看起來像另一個屬性的類，它最終會as this JavaScript：

Slider.prototype.slide = Slider.slideme;

Paste your代碼放入的TRY COFFEESCRIPT面板中，您將看到它認爲您的CoffeeScript的含義。

來源

2013-01-08 16:35:30

嗨，感謝您的快速反饋。縮進是關閉的，但更多的是通過粘貼在這裏而不是原來的。 '$（@ id）.bind（slide：@slideme）'現在會導致這個錯誤：_TypeError：this.id不是一個function_，所以滑塊不會更新該值。 – tbecker

'slideme'裏面的'@ id'是什麼？您確定該函數看起來像$（@ id +「_data」）.val（@value）而不是$（@ id「_data」）.val（@value）'？ –

對於這個問題，正確答案是'「＃{@ id} _data」'，因爲我想組合字符串。數據現在已更新。我的代碼現在看起來像這樣：'slideme：（event，ui）=> @ value = @ myslider.slider（「value」） $（「＃{@ id} _data」）.val（@value）'where該值在發送到數據字段之前被更新。感謝提示 - @mu太短 – tbecker

將事件處理程序添加到coffeescript類的jQuery滑塊

回答

相關問題