Как я могу использовать jQuery для обновления поля в моей модели рельсов?

0

У меня есть модель, Player, у которой есть поле total_points.

На моей домашней странице у меня есть имя игрока и total_points:

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

Я хотел бы, чтобы поле total_points на @player1 увеличивалось на 1 каждый раз, когда пользователь нажимает на имя игрока. До сих пор мой jQuery (coffeescript):

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

  $('#player1').click pointForPlayer1

Это работает (как и в случае, он регистрирует сообщение на консоли), но я не уверен, как увеличить клик @player1.total_points на 1, а затем повторно отобразить сообщение выше (желательно без перезагрузки всей страницы). Благодарю!

Теги:
coffeescript

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)
Поделиться
  • 0
    Спасибо, это действительно полезно! Быстрый вопрос: что я могу использовать для ссылки на new_total в действии контроллера, которое вызывается URL? Я пробовал params [: new_total], и это ноль. Еще раз спасибо?
  • 1
    Это зависит от того, как вы называете $.post , обычно вы говорите $.post 'some-url', data, callback где data будет объектом, который заканчивается в params в вашем контроллере. Таким образом, data вы используете в CoffeeScript, определяют, как вы интерпретируете params . Кроме того, вы не будете отправлять новое итоговое значение на сервер, сервер просто отправит один шаг столбца в базу данных, извлечет новое итоговое значение из базы данных и отправит его обратно.
Показать ещё 4 комментария
0

Поскольку вы решили использовать jquery (который, я думаю, может быть самым большим изобретением вычислительного возраста :)), это относительно просто.

Вы захотите использовать команду post, которая будет отправляться обратно в ваше приложение с помощью AJAX. Таким образом, в вашем случае coffeescript будет $ ('# player1'). Click → $.post (маршрут, данные, метод успеха, тип данных) для документов JQuery

Затем метод успеха может принимать возвращаемые данные и обрабатывать их. Если ваш html изменится в этот момент, вы можете вернуть html и заменить соответствующий кусок html на JQuery. Вы также можете вернуть JSON, XML и т.д. По своему усмотрению. Я думаю, в этом случае это звучит так, будто возвращение части html может быть уместным. Для этого вам понадобится соответствующее представление.

Поделиться
  • 0
    Спасибо! Что я использую для ссылки на данные, которые я передаю, когда я нахожусь в действии контроллера, которое вызывается URL?

Ещё вопросы

Сообщество Overcoder
Наверх
Меню