如何使用 jQuery 更新我的 rails 模型上的字段？

Question

我有一个模型 Player，它有一个字段 total_points。

在我的主页上，我有球员姓名和总积分：

<div id="player1">
  <h3><%= "#{@player1.first_name} #{@player1.last_name} (#{@player1.total_points})" %></h3>
</div>

我想让@player1 上的 total_points 字段在用户每次点击玩家的名字时增加 1。到目前为止，我的 jQuery (coffeescript) 是：

/home.js.coffee
jQuery ->
  pointForPlayer1 = (e) ->
    e.preventDefault()
    console.log('player 1 clicked')

  $('#player1').click pointForPlayer1

这有效（如，它将消息记录到控制台），但我不确定如何让点击增加 @player1.total_points 1，然后重新呈现上面的消息（最好不重新加载整个页）。谢谢！

Answer 1

如果您调整您的 HTML 以便您可以轻松找到总分，您将有一个更好的时间。像这样的：

<div id="player1">
  <h3>
    <%= "#{@player1.first_name} #{@player1.last_name}" %>
    (<span class="total"><%= @player1.total_points %></span>)
  </h3>
</div>

那么您可能希望控制服务器端来增加玩家的总分并发回新的总分。那会给你留下这样的东西：

$ ->
  $('#player1').click (e) ->
    e.preventDefault()
    $.post 'whatever-the-url-is', (new_total) ->
      $('#player1 .total_points').html(new_total)

如果您没有在服务器上存储任何内容，那么您可以这样做：

$ ->
  $('#player1').click (e) ->
    e.preventDefault()
    $t = $('#player1 .total_points')
    $t.html(parseInt($t.html(), 10) + 1)

Answer 2

由于您选择使用 jquery（我认为这可能是计算时代最伟大的发明 :)），这相对容易。

您需要使用 post 命令，该命令将使用 AJAX 回传到您的应用程序。因此，在您的情况下，咖啡脚本将是 $('#player1').click -> $.post(route, data, success method, datatype) per the JQuery docs

success 方法然后可以获取返回数据并进行处理。如果此时您的 html 发生更改，您可以返回 html 并将相应的 html 块替换为 JQuery。您还可以根据需要返回 JSON、XML 等。我认为在这种情况下，听起来返回一大块 html 可能是合适的。您需要一个合适的视图来进行渲染。