0

我在ActionCable頻道的CoffeeScript部分中創建多個按鈕並匹配事件偵聽器時遇到了問題。我知道的不同拼接方法單引號的文字(文字字符串)和雙引號的文本(字符串):單引號與Coffeescript中字符串的前後串聯而不轉向文字

  • "#{first_name} McFly"對雙引號
  • first_name + ' McFly'單引號

,對嗎?

所以我有點困惑,爲什麼這似乎並沒有工作:

answer_text = "answer_button_" 
    counter = 0 
    for i in data.answers 
     answerHtml.push "<button type='button' id=answer_text+counter >#{i.title}</button>" 
     $('#'+answer_text+counter).on 'click', (e) -> App.answer_data.send_data() 
     counter = counter+1 

我一直停留在這個部分的時間太長了,所以如果有人可以,我會很開心給我一個正確的方向:)

回答

0

好吧,所以問題是與單擊處理程序的第一部分 - 大括號中的表達式需要用單引號括起來。例如:

$('#answer_button_0').on 'click', (e) -> App.answer_data.send_data() 

但是爲了能夠串聯單引號到正面和背面我的字符串沒有把它變成一個字符串我用$.parseHTML("\'")逃脫單引號。

那麼,終於爲我工作是這樣的:[編輯:原來,這也不是辦法,見下文]

$($.parseHTML("\'" + '#' + answer_text + counter + "\'")).on 'click', (e) -> App.answer_data.send_data() 

編輯: 設法解決該事件偵聽器和按鈕(感謝@mu!):

answer_text = "answer_button_" 
counter = 0 
for answer in data.answers 
    answerHtml.push "<button type='button' id=#{answer_text+counter} >#{answer.title}</button>" 
    counter = counter+1 

要解決此事件偵聽器我以後做一個單獨的循環中的代碼(按鈕都澳鵬後DED頁面):

counter = 0 
for id in data.answers.map (answer) -> answer.id 
    console.log "[AC] answer id: #{i.id}" #This prints 4 different ids, like it should! 
    $('#answer_button_'+counter).on 'click', (e) -> App.answer_data.send_data(id) 
    counter = counter+1 

不幸的是,現在的按鈕和事件偵聽器的工作我有問題,該id屬性,我通過對在新創建的事件監聽器循環(在send_data(id))始終是相同的 - 獨立於我按哪個按鈕。我不知道爲什麼...:/

編輯2:由於@mu建議我加入了做關鍵字,現在,它的工作原理:

counter = 0 
for id in data.answers.map (answer) -> answer.id 
    do (id) -> 
    $('#answer_button_'+counter).on 'click', (e) -> App.answer_data.send_data(id) 
    counter = counter+1 

謝謝! :)

+0

確定嗎? '$('#'+ answer_text + counter)'應該沒問題,等於'$(「## {answer_text}#{counter}」)''。當您構建「

+0

你是對的@mu。 '$('#answer_button _'+ counter).on'click',(e) - > App.answer_data.send_data()'是連接的正確方式 - 我想過於複雜。而且你對另外兩個部分也是對的:我將它改爲'answerHtml.push「」'我做了第二個循環用於在按鈕實際附加到頁面後設置事件偵聽器。不幸的是我現在面臨着一個不同的問題 - 我已經更新了我的問題。 – megahra

+0

你想要一個'do'循環,看看[這個答案](https://stackoverflow.com/a/18047974/479863),[這部分文檔的底部](http://coffeescript.org/#循環)和[這些搜索結果](https://stackoverflow.com/search?q=user%3A479863+%5Bcoffeescript%5D+CoffeeScript+provides+the)。 –