javascript - Rails 基于 AJAX 请求更新元素？

Question

我阅读了很多有关 Rails 和 AJAX 以及 5.1 Unobtrusive javascript 的内容。例如，它解释了很多有关使用 .js 文件响应 Rails 版本的 AJAX 调用的信息。

但是我想做的并不是提供整个 .js 文件，它只是在 <% link_to %> 之后更新一个元素。发布请求。根据我的理解设置remote: true将其作为 AJAX 请求提交。

本质上，我有一个“帖子”，用户可以通过链接的“喜欢”按钮来喜欢它。这会向“Post” Controller 发送一个 POST 请求，该 Controller 将帖子更新为“喜欢”并向帖子添加“喜欢”。

不幸的是，要看到帖子被点赞的效果(这只是链接改变了颜色以及字体很棒的图标)，您需要刷新页面。我基本上希望它无需刷新即可更新。

根据我所读到的内容，我“认为”我需要制作 respond do并通过 .js 在我想要更新的 View 中使用 .js 文件响应请求(例如，如果 Controller 操作称为“like”，则可能是正在更新的 View 中的 like.js.erb 文件？)。但我不想提供整个新页面..或者这只是运行 .js 吗？

然后我可以做类似 $('i.fa-icon#id').style.color = "blue" 的事情或者其他的东西？ (我假设我可以将数据从 Controller 发送到 .js.erb 文件？)。不确定执行此操作的最佳方法，是否 Rails 元素很多时候都有某种 data-attribute或者其他什么(我在这方面还是个初学者)。

Answer 1

你的描述很正确!与其他答案相反，您甚至不需要事件监听器，但正如您所说，您希望在 Controller 中有一个 respond_to 。所以从html开始:

# post/index.html.erb
<div id="like-button">
  <%= button_to "Like this post", post_path(@post), remote: true %>
</div>

请注意，当您使用 button_to 帮助程序时，默认情况下它将是 POST 请求。

如果单击它，它将转到 controller#update，您要将其更改为:

#posts_controller.rb
...
def update
  @post.save
    respond_to do |format|
      format.html { redirect_to post_path(@post) } 
      format.js  # <-- will render `app/views/posts/update.js.erb`
    end
end

注意:format.html 在 JS 禁用时呈现。现在在启用JS的情况下，它会执行app/views/posts/update.js.erb文件。它可以看起来像这样:

const likeButton = document.getElementById('like-button');
likeButton.innerHTML = '<%= j render "posts/liked-link", post: @post %>';

最后一行在做什么？当然，您可以直接使用 JavaScript 更改样式，但您也可以渲染新的部分 - 您将在新的 html 文件中创建它:

# app/views/posts/liked_link.html.erb
<div id="like-button ">
 <p>"You liked this post!" </p>
</div>

我现在刚刚将链接/按钮更改为p，但是当然您可以做任何您想做的事情。

希望这是有道理的:)