使用 Ajax/Javascript 增加 Rails 模型列

Question

我在 Rails 音乐应用程序中为 tracks 模型增加整数列 (plays) 时遇到问题。用户可以使用如下按钮在应用中播放曲目：

<% @top_tracks.each do |track| %>
  <button class="track-play track-<%= track.id %>-play" onclick="playTrack(<%= track.to_json %>)">
    <i class="icon-play"></i>
  </button>
  ...
  [info about the track, such as <%= track.title %>]
  ...
<% end %>

以下是相应Javascript的相关部分：

var player = document.getElementById('audio');

window.playTrack = function (track) {
    player.setAttribute('src', track.file_url);
    player.play();
};

我已经阅读了一些类似问题的答案，例如 this one，这些问题建议使用 Ajax/Javascript，但我不确定如何做到这一点才能获得我想要的结果。我什至不知道 Ajax/Javascript 是否是实现我正在寻找的最佳方式。

应该发生的是，每次播放曲目并调用 playTrack() 函数时，该曲目的 plays 列的值应该增加 1，然后（显然）@987654328 的新值@ 应该保存在数据库中。

Answer 1

在您的每个曲目按钮中添加一个data attribute，例如data-track

<% @top_tracks.each do |track| %>
  <button data-track="#{track.id}" class="track-play track-<%= track.id %>-play" onclick="playTrack(<%= track.to_json %>)">
    <i class="icon-play"></i>
  </button>

<% end %>

在你的 routes.rb 中声明：

post '/update_track_info', as: 'update_track_info', to: 'tracks#update_track_info'

创建一个ajax请求：

window.playTrack = function (track) {
    player.setAttribute('src', track.file_url);
    player.play();
    $.ajax({
      url: '/update_track_info',
      data: { track_id: $(this).data('track').val() },
      type: 'POST'
    }) 

};

然后在控制器动作上：

def update_track_info
 @track = Track.find(params[:track_id].to_i)
 @track.update_column(:plays, @track.plays.next)    
 render :nothing => true
end