RoR：按钮按下时简单无刷新

Question

我的应用程序上有用户关注和取消关注按钮。我不想做任何花哨的事情，我只是不想每次点击关注或取消关注按钮时都刷新页面。

我的控制器

relationships_controller.rb

     def create
        current_user.follow(@user)
        respond_to do |format|
         format.html { #handle HTML, i.e. full page reload }
         format.js # handle ajax request
        end
      end
    
      def destroy
        current_user.unfollow(@user)
        respond_to do |format|
          format.html
          format.js # this one handle the request comes from `remote: true` button
        end
      end

我的看法

tweets/index.html.erb

    <% if current_user.id != tweet.user.id %> 
                <% if current_user.following?(tweet.user) %>
                  <%= button_to "Unfollow", relationships_path(user_id: tweet.user), remote: true, method: :delete, :class => "btn btn-primary" %>
                 <% else %>
                   <%= button_to "Follow", relationships_path(user_id: tweet.user), remote: true, :class => "btn btn-primary" %>
                <% end %>
                <br>
               <% end %>
               <hr/>
              <% end %>

关系模型

relationship.rb

class Relationship < ApplicationRecord
    belongs_to :follower, class_name: "User"
    belongs_to :followed, class_name: "User"

    validates :follower_id, presence: true
    validates :followed_id, presence: true
end

用户模型

User.rb

has_many :active_relationships, class_name: "Relationship", foreign_key: "follower_id", dependent: :destroy
  has_many :passive_relationships, class_name: "Relationship", foreign_key: "followed_id", dependent: :destroy


  has_many :following, through: :active_relationships, source: :followed
  has_many :followers, through: :passive_relationships, source: :follower


  def follow(user)
    active_relationships.create(followed_id: user.id)
  end

  def unfollow(user)
    active_relationships.find_by(followed_id: user.id).destroy
  end

  def following?(user)
    following.include?(user)
  end

路线

routes.rb
    resource :relationships, :only => [:create, :destroy]

应用程序.js

require("@rails/ujs").start()
require("turbolinks").start()
require("@rails/activestorage").start()
require("channels")
require("chartkick")
require("chart.js")

//= require jquery3
//= require popper
//= require bootstrap-sprockets

检查过的按钮元素

<form class="button_to" method="post" action="/relationships?user_id=1" data-remote="true"><input class="btn btn-primary" type="submit" value="Follow"><input type="hidden" name="authenticity_token" value="hfwF8wXBcp/OM2P/pCYBnEBrjw22BDKWbw/dZFwwDsRpiIFq5jBKS/AoTMjkCZRrGum7UyW1kaL3h/4XEM2wIg=="></form>

当我点击跟随时，现在什么都没有发生。我想我的视图中需要一个新的 js 文件，但不确定如何实现它。

我已经研究过解决方案，但它们种类繁多，并且试图做的比我想做的更多，这只是简单的不刷新。

如何最好地做到这一点？ （如果需要可以提供更多代码）

编辑：这段代码让 jQuery 在我的 ..webpack/enironment.js 文件中的 Rails 6 中工作

# app/config/webpack/environment.js
const {environment} = require('@rails/webpacker');

const webpack = require('webpack');
environment.plugins.append('Provide', new webpack.ProvidePlugin({
  $: 'jquery',
  jQuery: 'jquery' # or if its not work specify path `'jquery/src/jquery'` which node_modules path for jquery
}));

module.exports = environment;

对于@max

  $(document).on('ajax:success', '.follow-btn', function(event){
  let $el = $(this);
  let method = this.dataset.method;
  if (method === 'post') {
    $('.follow-btn[href="'+this.href+'"]').each(function(el){ $(el).text('Unfollow');  });
    this.dataset.method = 'delete';
  } else if (method === 'delete') {
    $('.follow-btn[href="'+this.href+'"]').each(function(el){ $(el).text('Follow');  });
    this.dataset.method = 'post';
  }
});

Answer 1

您可以发送一个 JSON 请求并编写一个简单的事件处理程序，而不是进入 js.erb 兔子洞。

让我们首先向按钮添加data-type="json" 属性，以便它们发送 JSON 请求而不是 javascript：

<% unless current_user == tweet.user %> 
  <% if current_user.following?(tweet.user) %>
    <%= link_to "Unfollow", relationships_path(user_id: tweet.user), 
        data: { remote: true, type: :json, method: :delete }, 
        class: "follow-btn btn btn-primary" 
  <% else %>
    <%= link_to "Follow", relationships_path(user_id: tweet.user), 
        data: { remote: true, type: :json, method: :post}, 
        class: "follow-btn btn btn-primary" 
    %>
  <% end %>
<% end %>

然后为您的控制器编写 JSON 响应。

def create
  current_user.follow(@user)
  respond_to do |format|
    format.html
    format.json { head :created }
  end
end
    
def destroy
  current_user.unfollow(@user)
  respond_to do |format|
    format.html
    format.json { head :no_content }
  end
end

你可以看到它非常简单，当创建一个资源时，你返回一个201 - Created，通常是一个位置标头或正文中的实体（一个描述创建内容的 JSON 有效负载）。当您更新或销毁记录时，204 - No Content 状态码就足够了。

如果您现在对其进行测试并查看浏览器检查器中的网络选项卡，您将看到发送了 AJAX 请求但视图中没有任何反应。

因此，让我们编写一个事件处理程序，在发送请求后切换按钮文本和方法。因为 Rails UJS 已经为我们创建了按钮的 AJAX 处理程序，所以我们可以 hook into its events:

// put this in your application.js or anywhere in your pack
$(document).on('ajax:success', '.follow-btn', function(event){
  let $el = $(this);
  let method = this.dataset.method;
  if (method === 'post') {
    $el.text('Unfollow');
    this.dataset.method = 'delete';
  } else if (method === 'delete') {
    $el.text('Follow');
    this.dataset.method = 'post';
  }
});

为什么这比 js.erb 模板更好？

• 服务器端不参与更新客户端上的 UI。没有意大利面条代码视图。
• JavaScript 被缩小，不是由 ERB 生成，易于调试/推理。
• 可以更改为使用乐观创建/删除来提供即时反馈