Rails 5.0 - 如何在不使用 best_in_place gem 的情况下实现就地编辑答案

【问题标题】：Rails 5.0 - How to implement in-place editing without using best_in_place gemRails 5.0 - 如何在不使用 best_in_place gem 的情况下实现就地编辑
【发布时间】：2017-10-17 01:33:35
【问题描述】：

我正在使用刚刚升级到 v5.0.1（尚未升级到 5.1）的 RoR 构建活动站点。我的事件显示页面在页面底部有一个 cmets 部分，到目前为止，它只有一个创建和删除功能。我想向 cmets 添加一个编辑/更新功能，这样只有创建评论的用户才能在他们认为合适的情况下编辑评论。我希望他们能够在同一页面上编辑他们的评论。

我正在尝试使用 remote: true & Ajax 来实现这些更改，而不是依赖 gem，因为它看起来不太复杂，但我以前从未这样做过，而且似乎没有通过 Internet/SO 获得清晰的指南。这是我的视图和控制器代码 -

cmets_controller.rb

    def create
        @event = Event.find(params[:event_id])
        @comment = @event.comments.create!(params[:comment].permit(:name, :body))
        @comment.user_id = current_user.id


        redirect_to @event
    end

    def update
        @comment.user = current_user

    respond_to do |format|
      if @comment.update
        format.html { redirect_to @comment, notice: 'Comment was successfully updated.' }
        format.js   { }
        format.json { render :show, status: :created, location: @comment }
      else
        format.html { render :new }
        format.json { render json: @comment.errors, status: :unprocessable_entity }
      end
    end
  end



    def destroy
        @event = Event.find(params[:event_id])
        @comment = @event.comments.find(params[:id])
        @comment.destroy

        redirect_to event_path(@event)
    end

_cmets.html.erb

<% if user_signed_in?  %>
  <p><%= link_to "Edit", remote: true %></p>
  <p><%= link_to 'Delete', [comment.event, comment],
                  method: :delete,
                  class: "button",
                  data: { confirm: 'Are you sure?' } %></p>
  <% end %>

我的理解是我需要在我的 views/cmets 文件夹中包含一个 .js.erb 文件来处理这个问题（edit.js.erb ？），但我不清楚我需要什么 javascript 代码包括为了这个工作。另外，我认为我上面的控制器代码似乎不正确 - 这应该进入编辑操作吗？我是否还需要在我的事件控制器中添加一个 Event#show 操作，因为它位于视图中？

任何帮助将不胜感激。

【问题讨论】：

标签： ruby-on-rails ruby ajax model-view-controller

【解决方案1】：

我知道这并不能回答您的问题，但希望它可以解决您在重新发明轮子方面的麻烦。这也是为什么（我相信）你会看到反对票。

我不想使用 best_in_place gem，因为它似乎有一段时间没有更新了，我不确定它是否最适合 Rails 5.0。

宝石不需要有活动就可以仍然有用。 “暂时”是指“不到 24 小时前”，因为我在上个月看到了很多活动。一旦宝石解决了它通常很好。

https://github.com/bernat/best_in_place/commits/master

Rails 5 仍然可以处理 POST 请求，对吧？然后它应该工作。 best_in_place 比任何东西都更重 javascript。 https://github.com/bernat/best_in_place/tree/master/lib/best_in_place

其中最“令人生畏”的代码是 helper.rb 文件，它呈现了与 JS 库挂钩的 HTML。

更新：

cmets/edit.js.erb 文件将负责插入表单以编辑评论，例如$('div#new_comment').append('<%= j render 'form' %>');

这假设您在元素/ID 命名方面使用 Rails 的约定。

如果你有一个link_to("Edit", edit_comment_path(comment), :remote => true)，一切都应该自动触发。

Here's an example repo using Rails 4; Rails 5 应该是一样的，除了（可能）respond_to 块？我不确定，还没有使用 Rails 5。只需执行bundle、rake db:setup，然后执行rails s；导航到http://localhost:3000/events 并享受。

【讨论】：

感谢 Josh，这些都是公平的 cmets。我的意思不是让这篇文章贬低某个特定的宝石。在这种情况下，代码似乎并不太难实现，所以我想了解如何使用 Ajax 方法来实现。我会相应地修改问题。
@Mike.Whitehead 我会相应地更新我的答案:)
谢谢。您对 Ajax/内联编辑有什么想法吗？
查看我的更新 :) 我包含了一个我在 10 分钟内完成的示例 repo，它使用 ajax 进行编辑。
@JoshBrady 感谢您提供如此详细的答案 - 非常感谢。如果您在同一页面上进行编辑，是否需要为编辑按钮添加路由？这是一个嵌套路线，所以我需要做（@event，comment）

【解决方案2】：

您在使用 edit.js.erb 时走在了正确的轨道上。该文件应包含用于设置编辑屏幕的 JS 代码，例如，可能隐藏 DIV 并显示 INPUT 或 TEXTAREA。

当然，文件也可以包含 Ruby 代码，在标记内。

【讨论】：