javascript - 如何在动态生成的 Rails 表上创建 JS 函数

Question

我正在尝试创建一个 JS 函数来增加页面上的投票计数，我通常会通过编写 Document.getElementByID 然后写入 ID 来完成此操作，但在 Rails 中，我试图弄清楚如何编写这个函数，其中在循环中动态创建表行。我如何创建一个函数来执行此操作？

这是 html Rails 循环:

  <tbody>
    <% @requests.each do |request| %>
      <tr>
        <td><%= request.artist %></td>
        <td><%= request.title %></td>
        <td><%= request.voteCount %></td>
        <td><button onclick="upVote()">Vote</button></td>
      </tr>
    <% end %>
  </tbody>

Answer 1

您有几个选择:如果您想坚持使用 onclick 处理程序，只需将请求 ID 传递给 upVote() 函数即可。可能看起来像这样:

<td><button onclick="upVote(<%= request.id %>)">Vote</button></td>

然后，在您的 JS upVote(requestID) 函数中，执行发出该请求所需的任何操作并相应地更新您的 UI。

另一个更好的选择是使用 Rails 的内置 remote link_to helper ，由rails-ujs 提供支持。看起来可能是这样的:

<td><%= link_to 'Vote', [:upvote, request], remote: true, method: :post, class: 'upvote' %></td>

请注意，我使用的是 POST 方法，因为具有副作用的操作不应通过 GET 请求来完成。确保您的路线相应。

然后在你的RequestsController中:

def upvote
  request = Request.find(params[:id])
  request.upvote! # Or do whatever you need to do to upvote it

  # Respond to your JS request with whatever updated info it might need to update the UI
  render json: { voteCount: request.voteCount } } 
end

最后，在 JS 中(写为 CoffeeScript):

$('a.upvote').on 'ajax:success', (event) ->
  # Update your UI to reflect the upvote (you can access the JSON returned from your upvote action here to make necessary updates)