如何在不重定向到 Rails 中的编辑视图页面的情况下编辑图片评论

Question

我正在构建一个用于练习的应用程序（Instagram 副本），但我很难让某个功能发挥作用。

我想要发生的是，用户能够编辑或删除他们自己关于图片的 cmets。我能够使删除功能起作用，但我无法弄清楚“编辑评论”功能。我希望用户能够从图片显示页面中编辑评论。代码如下。

pics_controller.rb

class PicsController < ApplicationController

  before_action :find_pic, only: [:show, :edit, :update, :destroy, :upvote]
  before_action :authenticate_user!, except: [:index, :show]
  before_action :require_same_user, only: [:edit, :update, :destroy]

  def index
    @pics = Pic.all.order("created_at DESC")
  end

  def show
  end

  def new
    @pic = current_user.pics.build
  end

  def create
    @pic = current_user.pics.build(pic_params)

    if @pic.save
      redirect_to @pic, notice: "Your pic has been posted!"
    else
      render :new
    end
  end

  def edit
  end

  def update
    if @pic.update(pic_params)
      redirect_to @pic, notice: "Awesome! Your Pic was updated!"
    else
      render :edit
    end
  end

  def destroy
    if @pic.destroy
      redirect_to root_path
    end
  end

  def upvote
    @pic.upvote_by current_user
    redirect_back fallback_location: root_path
  end

  private

  def pic_params
    params.require(:pic).permit(:title, :description, :image)
  end

  def find_pic
    @pic = Pic.find(params[:id])
  end

  def require_same_user
    if current_user != @pic.user
      flash[:danger] = "You can only edit or delete your own pictures"
      redirect_to root_path
     end
  end
end

cmets_controller.rb

class CommentsController < ApplicationController

  def create
    @pic = Pic.find(params[:pic_id])
    @comment = @pic.comments.create(params[:comment].permit(:name, :body))

    redirect_to pic_path(@pic)
  end

  def edit
    @pic = Pic.find(params[:pic_id])
    @comment = @pic.comments.find(params[:id])
    redirect_to @pic
  end

  def update
    @comment = @pic.comments.find(params[:id])
    @comment.update_attributes(comment_params)
    if @comment.save
        redirect_to @pic
    end
  end

  def destroy
    @pic = Pic.find(params[:pic_id])
    @comment = @pic.comments.find(params[:id])
    @comment.destroy

    redirect_to pic_path(@pic)
  end

  def show
    @pic = Pic.find(params[:pic_id])
  end

  private

  def comment_params
    params.require(:comment).permit(:body)
  end

end

这是从显示页面调用的 (_comment.html.erb) 部分

<div class="card" style="width: 18rem;">
  <div class="card-header">
   <span class="badge badge-dark"><%= comment.name %></span>
  </div>
  <ul class="list-group list-group-flush">
    <p><%= comment.body %></p>
  </ul>
</div>

<% if user_signed_in? && comment[:body].present?  %>
  <p><%= link_to 'Delete Comment', [comment.pic, comment], method: :delete, class: "btn btn-danger", 
    data: { confirm: "Are you sure?" } %></p>
  <p><%= link_to 'Edit Comment', edit_pic_comment_url(@pic, comment), class: 'btn btn-primary' %></p>

<% end %>

非常感谢任何帮助。 TIA

Answer 1

您需要针对这种情况进行 ajaxify。步骤将是：

• 使用data-remote=true 选项创建编辑链接。它将使链接能够通过 ajax 请求访问服务器。另外，添加一个可编辑的div。

<a href="<%= edit_pic_comment_url(@pic, comment) %>" data-remote="true">Edit</a> <div id="comment_#{comment.id}_form"></div>

• 在编辑方法中使用js 响应请求。喜欢：

  def edit respond_to do |format| format.js # actually means: if the client ask for js -> return edit.js end end

• 创建edit.js 文件。在那里，在 ID 为 comment_4_form 的已定义 div 上呈现评论 _form.html.erb（假设您现在正在编辑 ID 为 4 的评论）。

我知道它没有详细说明。如果我详细说明，解决方案会更大。但是，如果您了解循环，那么您就可以开始了。

Answer 2

您可以使用 (jquery 和 ajax)

查看 Railscasts 教程第 136 集 Railscasts