java - Ruby on Rails，如何使用 Ajax 更新 Div on like/unlike

Question

所以我遇到的问题是让我的喜欢/不喜欢按钮在我的 Ruby on Rails 应用程序中使用 ajax 刷新，这是我的代码:

app/views/_comment.html.haml

<小时/>

- likes = comment.likes
%div.comment{id: "comment-#{comment.id}"}
  .comment-avatar
    .medium-user-avatar.avatar-canvas
      - if comment.user.avatar_url
        = image_tag comment.user.avatar_url(:medium)
      - else
        %span.medium-user-initials.initials-decoration
          = comment.user.avatar_initials
  %span.comment-username= link_to(comment.user_name, "#")
  %span.comment-body~ markdown(comment.body)
  .comment-time
    = time_ago_in_words(comment.created_at) + " ago"
    - if can? :like, comment
      = " · "
      - if likes.find_by_user_id(current_user.id).nil?
        = link_to "Like", like_comment_path(comment), method: :post, remote: true
      - else
        = link_to "Unlike", unlike_comment_path(comment), method: :post, remote: true
    - if comment.user == current_user
      = " · "
      = link_to "Delete", comment_path(comment), method: :delete, remote: true,
        :data => { :confirm => "Are you sure you want to delete this comment?" }
  - if likes.count > 0
    .comment-likes
      - likers = likes.map { |like| link_to(like.user_name, "#") }
      - if likers.length > 1
        - likers = likers.slice(0, likers.length - 1).join(", ").concat(" and " +     likers.slice(-1))
      - else
        - likers = likers[0]
      = "Liked by #{likers}".html_safe

app/controllers/comments_controller.rb

<小时/>

class CommentsController < BaseController
  load_and_authorize_resource

  def destroy
    destroy!{ discussion_url(resource.discussion ) }
  end

  def like
    comment_vote = resource.like current_user
    Event.comment_liked!(comment_vote)
    #redirect_to discussion_url(resource.discussion )
    render :partial => "like"
    comment_likes
  end

  def unlike
    resource.unlike current_user
    #redirect_to discussion_url(resource.discussion)
    render :partial => "unlike"
    comment_likes
  end

  def comment_likes
    render :partial => "comment_likes"
  end
end

然后是 like、like 和 comment_likes 的 .js.erb 文件:

app/views/_like.js.erb

<小时/>

$(".comment-time a#like").html("<%= escape_javascript(render('.comment-time a#like'")

app/views/_unlike.js.erb

<小时/>

$(".comment-time a#unlike").html("<%= escape_javascript(render('.comment-time a#unlike'")

app/views/_comment_likes.js.erb

<小时/>

$(".comment-likes a##").html("<%= escape_javascript(render('.comment-likes a##'")

当前单击“like”将更新数据库，但在页面刷新之前不会显示更改，我只想使用ajax刷新各个div。有关 div 的更多信息可能会有所帮助，因此 ruby​​ 创建 html 并包含在其中作为示例，或者当已经喜欢时，我只需要刷新这些 div 以显示数据库中的最新信息以及包含 http://localhost :3000/comments/7/不像 500 (内部服务器错误)"

如果这很重要的话，其余的脚本已经在coffeescript中完成了？我读到 Controller 功能应该使用 .js.erb 所以希望这不会影响这一切。 (我确信我的 js.erb 是错误的)

Answer 1

我不确定这是否是主要问题，但需要解决的一件事是 .js.erb 文件中的渲染语句。

Rails 渲染方法需要 erb 模板或要渲染的操作作为其参数。当您调用时:

render('.comment-time a#unlike')

Rails 会尝试在 View 路径中的某个位置查找名为“.comment-time a#unlike”的模板，这可能会引发某种错误。确保您注意 JavaScript(在客户端)和应用程序(在服务器上)中发生的情况之间的差异。

解决这个问题的一种方法如下。首先检查您想要更新 View 的哪一部分，为了简单起见，因为您已经有了 _comment 部分，让我们使用它。其次找出应该替换 dom 中的哪一部分，在您的情况下是带有当前评论 ID 的 div。然后我们可以执行以下操作:

$("#comment-<%= @comment.id %>").replace_html(
  "<%= escape_javascript render('comments/comment', :comment => @comment) %>"
);

这将在 app/views/comments 中呈现 _comment.html.erb 部分，将结果(转义)插入到您的(dis-)like中的javascript中.js.erb 并将其发送回浏览器执行。然后，浏览器将 replace_html 替换到评论的 div(由 ID 指示)

因为我们要替换整个评论 div，所以您可以使用相同的方法来表示喜欢和不喜欢。如果您需要节省带宽，您可以对其进行微调以仅重新渲染“点赞”按钮本身，但目前这将起作用。