Question

我有一个模型，播放器，有一个字段total_points。

在我的主页上，我有玩家姓名和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回发到您的应用程序。所以，在你的情况下，coffeescript将是$（'＃player1'）。点击 - ＆gt;每个the JQuery docs

的$ .post（路由，数据，成功方法，数据类型）

然后，成功方法可以获取返回数据并处理它。如果你的html在这一点上发生了变化，你可以返回html并用JQuery替换相应的html块。您也可以根据需要返回JSON，XML等。我认为在这种情况下听起来像返回一大块html可能是合适的。你需要一个适当的视图来渲染它。

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

2 个答案: