使用 Coffeescript 将表格行转换为 Rails 中的链接

Making a table row into a link in Rails using Coffeescript

本文关键字：Rails 链接 转换 Coffeescript 表格 使用      更新时间：2023-09-26

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

起点是回答前面问题时提供的代码：在 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) %>">行基于上述链接问题中给出的答案。

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

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

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

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

上面的咖啡脚本代码是歌曲.js.coffee文件中的唯一代码。我是否缺少任何需要包裹在代码中的内容？

部分答案：按照第一条注释中的建议在原始 coffeescript 代码之前添加$ ->确实会使表行可以选择一次。我相信从其他阅读中，美元符号变量已被制成jQuery的别名（一个例子是在The Little Book on Coffeescript：http://arcturo.github.io/library/coffeescript/04_idioms.html 的成语章节中）。

遗憾的是，加载页面后，可以选择一个表行，

从而显示编辑页面，但如果用户返回页面，使用浏览器上的后退按钮或返回页面的链接，则无法再选择表行。

新的咖啡脚本代码是：

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

上面的代码是从javascript到coffeescript的正确翻译吗？我对这两种脚本语言都很陌生。

在

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

谢谢。

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

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

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

对于此问题，您可以尝试以下操作：

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

希望这有帮助。

相关文章：