如何确保我的JS ERB对Turbolinks 5友好？

Question

我有一些简单的JS ERB文件，这些文件在第一次就可以完美运行。 但是，问题在于，当多次按下JS触发器时，它在客户端不起作用（即使它在服务器端也起作用）-我怀疑这与Turbolinks 5有关。

我的JS.erb的一个这样的例子是：

$("#a-<%= @answer.id %>-accept-answer i.accepted-answer-checkbox.fa.fa-check-square-o").addClass('fa-check-square voted');
$("#a-<%= @answer.id %>-accept-answer i.accepted-answer-checkbox.fa.fa-check-square-o").removeClass('fa-check-square-o');

那是在我的Questions控制器和/questions/accept_answer.js.erb 。

但是，现在，我的questions.coffee文件为空。

解决这个问题的最佳方法是什么？

Answer 1

老实说，CoffeeScript具有Ruby风格的插值，所以转换这些代码的最简单方法是去做类似

$("#a-#{@answer.id}-accept-answer i.accepted-answer-checkbox.fa.fa-check-square-o").addClass 'fa-check-square voted'
$("#a-#{@answer.id}-accept-answer i.accepted-answer-checkbox.fa.fa-check-square-o").removeClass 'fa-check-square-o'

但是，您要尝试执行的操作可能是，通过切换这三个类，并使它们处于彼此相对的初始状态，可以更好地解决问题，例如：

$("#a-#{@answer.id}-accept-answer i.accepted-answer-checkbox.fa").click (el) ->
  $.each ['fa-check-square', 'voted', 'fa-check-square-o'], (_, val) ->
    $(el).find('i.accepted-answer-checkbox.fa').toggleClass val

当然，我可能会使它过于复杂，但这似乎解决了切换所需类的问题。