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)。 –