Question

这与以下问题有关，但我想使用coffeescript而不是javascript来与Rails 4中的默认值进行比较。

起点是先前问题的答案中提供的代码：Making a table row into a link in Rails

视图ERB代码包含一个包含以下代码的表生成器：

<% @songs.each do |song| %>
  <tr data-link="<%= edit_song_path(song) %>">
    <td><%= song.Name %></td>
    <td><%= song.Group %></td>
  </tr>
<% end %>

<tr data-link="<%= edit_song_path(song) %>">行基于上述相关问题中给出的答案。

我在songs.js.coffee文件中有以下内容：

$("tr[data-link]").click -> 
  window.location = this.dataset.link

这是我在Mark Berry的答案中对javascript的翻译。我还尝试了其他建议，例如window.location = $(this).data("link")。

加载页面时，表行不可单击。如果我用警报替换设置window.location的操作，我会在页面加载时获取警告对话框，而不是在用户单击表格行时。

上述coffeescript代码是song.js.coffee文件中唯一的代码。我错过了需要围绕代码的任何内容吗？

部分答案：在第一条评论中建议的原始coffeescript代码之前添加$ ->会使表格行可选择ONCE。我从其他阅读中相信，美元符号变量已经成为jQuery的别名（这方面的一个例子就是The Coffeescript的小书中的成语章节：http://arcturo.github.io/library/coffeescript/04_idioms.html）。

不幸的是，在页面加载后，可以选择一个表格行，导致显示编辑页面，但如果用户返回页面，则使用浏览器上的后退按钮或返回页面的链接，表行不再可选。

新的coffeescript代码是：

$ ->
  $("tr[data-link]").click -> 
    window.location = this.dataset.link

上面的代码是从javascript到coffeescript的正确翻译吗？我是两种脚本语言的新手。

在Rails 4中使用coffeescript制作可点击的表格行有不同的答案吗？

谢谢。

Answer 1

是的，您发布的代码是正确的翻译。 “jstocoffe.org”是一个很好的网站（虽然报告了一些错误），您可以使用它将JavaScript转换为CoffeeScript，反之亦然。

我不确定为什么它不能正常工作，因为您在@ muistooshort建议之后发布的代码应该有效，因为表格行变得“无法点击”。我说这个的原因是因为你没有在这里操作DOM，你已经将click事件附加到具有data-link属性的表行，当文档准备就绪时（这是$ ->）这应该可以作为预期，因为后退按钮和整页刷新会重新加载DOM。

对于动态添加的内容（或者在前面提到的DOM操作的情况下），您需要使用jQuery on方法（替换旧的live方法）通过父级或“父级”将事件绑定到“选择器” DOM树中的元素。阅读jQuery的“on”方法，该方法不仅适用于此问题，而且适用于您将要处理的任何未来事件处理。

但是，对于这个问题，您可以尝试以下方法：

$ ->
  $(document).on 'click', 'tr[data-link]', (evt) -> 
    window.location = this.dataset.link

希望这有帮助。

使用Coffeescript将表格行放入Rails中的链接

1 个答案: