javascript - 使用 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 然后(显然)plays 的新值应该保存在数据库中。

Answer 1

在每个 rails 按钮中添加一个数据属性，例如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'
    }) 

};

然后在 Controller 操作上:

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