javascript - 在 Ajax 请求后根据模型中的值更新 CSS 类

Question

我有一个显示剧集列表的 View 。我为此使用了部分内容:

    <div class="episode-list">
      <% if user_signed_in? %>
        <%= render partial: "shared_partials/episode_with_image_compact", collection: @recent_episodes, as: :episode %>
    <% end %>
    </div>

在该部分中，我有一个 button_to 向后端发送请求以将一集标记为已看到:

          <%= button_to manual_new_scrobble_path, {method: :post, form_class: 'manual-scrobble-btn', class: "button is-small #{'listened' if episode.has_play}", remote: true, params: {scrobble: {user_id: current_user.id, episode_id: episode.id}}} do %>
            <%= scrobble_icon(episode) %>
          <% end %>

scrobble_icon 函数只是根据剧集的状态设置一个类，如下所示:

  def scrobble_icon(episode)
    if episode.has_play
      icon('fas', 'check', class: 'listened')
    else
      icon('fas', 'check', class: 'unlistened')
    end
  end

我正在使用 remote: true 所以它不会导致页面加载。当我在为 SPA 做其他前端框架时，默认情况下总是有这种双向绑定(bind)，其中值会根据“商店”/模型的状态更新。

我现在已经阅读了多篇关于 TurboLinks 的文章和 server generated javascript但我仍然无法弄清楚问题的正确解决方案是什么。

我想要的:

• 点击按钮
• 请求成功并向DB写入值
• 按钮现在有类“listened”

实际发生了什么:

• 点击按钮
• 请求成功并向DB写入值
• 按钮看起来一样
• 我重新加载页面，按钮现在有类“listened”

很多类似问题的答案都谈到jQuery是:

1) 不再在 Rails 6 中使用
2) 不是我想在 2019 年使用的东西

谢谢!

Answer 1

您需要呈现一个 javascript 脚本:1 - 找到元素2 - 更新它的类

首先我会添加一些标识符，以便您可以识别正确的按钮

<%= button_to manual_new_scrobble_path, {method: :post, form_class: 'manual-scrobble-btn', class: "button is-small #{'listened' if episode.has_play}", id: "button_for_episode_#{episode.id}", remote: true, params: {scrobble: {user_id: current_user.id, episode_id: episode.id}}} do %>
  <%= scrobble_icon(episode) %>
<% end %>

注意 `id: "button_for_episode_#{episode.id}"参数

现在你可以用类似的东西来定位它:

// find the button
let button = document.getElementById("button_for_episode_#{params[:scobble][:episode_id]}");
// add the class
button.classList.add('listened');

// find the icon within that button
let icon = button.querySelector('.fas');
// remove "unlistened" class
icon.classList.remove('unlistened');
// add "listened" class
icon.classList.add('listened');

此脚本应该是您正在调用的操作的 View 。