在 Rails 中使用 Coffeescript 将表格行变成链接答案

【问题标题】：Making a table row into a link in Rails using Coffeescript在 Rails 中使用 Coffeescript 将表格行变成链接
【发布时间】：2013-09-11 17:18:33
【问题描述】：

这与以下问题有关，但我想使用咖啡脚本而不是 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文件中唯一的代码。我是否遗漏了需要围绕代码包装的任何内容？

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

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

新的coffeescript代码是：

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

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

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

谢谢。

【问题讨论】：

标签： javascript ruby-on-rails coffeescript

【解决方案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

希望这会有所帮助。

【讨论】：