1

我有一个模型 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，然后重新呈现上面的消息（最好不重新加载整个页面）。谢谢！

4

2 回答 2

2

如果您调整 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)
于 2013-09-22T01:13:34.303 回答
0

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

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

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

于 2013-09-22T01:10:09.007 回答