使用 TurboRails 进行单属性就地编辑，不使用 gem 的 Rails 7，如何进行验证反馈？

Question

使用 Turbo Frames 创建 model 的单个属性的就地编辑（不使用诸如 Best_In_Place 之类的 gem，因为它需要 jQuery 并且不适用于 Rails 7）此实现仅使用 turboframes。

为此，我遵循了本教程： https://nts.strzibny.name/single-attribute-in-place-editing-turbo/ （写于 2022 年 1 月）

该教程与 Ruby 3.2.0、Rails 7.0.4 完全不匹配，需要在显示页面上进行一个变量调整才能工作。

不幸的是，目前在本教程方法中没有验证反馈，因为实现的 turbo_frame 表单没有包含它。

问题：如何正确添加验证反馈和错误路由？ （最好是仅 turbo_frames 的解决方案）

教程总结：

• 创建新的应用程序和脚手架一个 model：用户名：字符串
• 更改UsersController （在 controller 上编辑单个属性的新操作，并将edit_name添加到 before_action 列表）

    before_action :set_user, only: %i[ show edit edit_name update destroy ]

    # GET /users/1/edit_name
    def edit_name 
    end

• 添加到routes.rb （用于编辑单个特定属性的新路由）

    resources :users do 
        member do 
            get 'edit_name' 
        end 
    end

• create view/users/ edit_name.html.erb （支持编辑特定属性的新视图页面，（这里是名称））。

    <%= turbo_frame_tag "name_#{user.id}" do %> 
        <%= form_with model: @user, url: user_path(@user) do |form| %> 
            <%= form.text_field :name %> 
            <%= form.submit "Save" %> 
        <% end %> 
    <% end %>

• _user.html.erb文件的添加（链接到创建的涡轮框架形式 edit_name.html.erb）

    <%= turbo_frame_tag "name_#{user.id}" do %>   
        Name: <%= link_to @user.name, edit_name_user_path(@user) %> 
    <% end %>

启动应用程序服务器后，我收到关于@user 为 nil:Class 的错误。

为了让教程正常工作，我必须更改 _user.html.erb 文件以在链接中为用户使用局部变量。

• 再次编辑_user.html.erb （将实例变量@user更改为局部变量user）

    <%= turbo_frame_tag "name_#{user.id}" do %>   
        Name: <%= link_to user.name, edit_name_user_path(user) %> 
    <% end %>

通过此更改，教程有效，允许通过 Turbo 帧就地编辑单个属性！ 但是没有实现 model 验证反馈。

下面，我尝试处理验证，首先将验证添加到 models/user.rb

    class User < ApplicationRecord
        validates :name, presence: true
        validates :name, comparison: { other_than: "Jason" }
    end

建议的解决方案：

CREATE a new turbo_stream file for editing errors that popup (it has an error in the turbo_frame tag that it is targeted, it needs to be to target any parent turboframe where the single attribute edit is initiated) 编辑错误

    <%= turbo_stream.replace"name_#{@user.id}" do %> 
        <%= form_with model: @user, url: user_path(@user) do |form| %>
          <% if @user.errors.any? %>
            <div style="color: red">
              <h2><%= pluralize(@user.errors.count, "error") %> prohibited this user from being saved:</h2>
              <ul>
                <% @user.errors.each do |error| %>
                  <li><%= error.full_message %></li>
                <% end %>
              </ul>
            </div>
          <% end %>
          <% if @user.errors[:name].any? %>
            <%= form.label :name, style: "display: block" %> <%= form.text_field :name %>
          <% end %>
          <% if @user.errors[:active].any? %>
            <%= form.label :active, style: "display: block" %> <%= form.check_box :active %>
          <% end %>
          <%= form.submit "Save" %>
        <% end %>
      <% end %>

并编辑 UsersController.rb 更新方法来处理 turbo stream 错误

    # PATCH/PUT /users/1 or /users/1.json
      def update
        respond_to do |format|
          if @user.update(user_params)
            format.html { redirect_to user_url(@user), notice: "User was successfully updated." }
            format.json { render :show, status: :ok, location: @user }
          else
            format.html { render :edit, status: :unprocessable_entity }
            format.json { render json: @user.errors, status: :unprocessable_entity }
            format.turbo_stream do
              if @user.errors[:name].any?
                @user.name = nil #so that it does not repopulate the form with the bad data
              if @user.errors[:active].any?
                @user.active = nil  
              end
              render :edit_errors, status: :unprocessable_entity 
            end        
          end
        end
      end

这一切都有效，除了在对无效条目后生成的表单进行成功编辑后，它只呈现该条目的节目，而不是所有条目。

做这一切的“干燥”方法是什么？ （以及如何只更新 turbo stream 中的一帧，以便在验证成功后只更新一个字段）？

从哲学上讲，与仅使用 jQuery 和 Gem Best_In_Place 相比，这些现在是否值得？？？ 似乎变化的数量越来越多，如果跨多个属性支持这样的功能，代码会变得难看吗？

Answer 1

由于最初的问题已解决，我将添加一些您可以执行此操作的其他方法。 自己做这件事会多一些工作，而且您不会拥有某些 gem 可以为您提供的所有功能。 另一方面，它的代码要少得多，而且您可以完全控制一切。 此外，如果您只需要让这一个字段可编辑，那么安装 gem 和 jquery 的开销太大了。

---

设置：

# rails v7.0.4.2
$ rails new hello_edit_in_place -c tailwind
$ cd hello_edit_in_place
$ bin/rails g scaffold User email first_name last_name --skip-timestamps
$ bin/rails db:migrate
$ bin/rails runner "User.create(email: 'admin@localhost', first_name: 'super', last_name: 'admin')"
$ open http://localhost:3000/users
$ bin/dev

class User < ApplicationRecord
  validates :email, presence: true, length: {minimum: 3}
end

涡轮框架

我将只修改默认表单，不会触及 controller 作为快速示例：

# app/views/users/_form.html.erb

# NOTE: this lets you render this partial and pass a local `:attribute` or
#       get attribute from url params.
<% if attribute ||= params[:attribute] %>
  <%= turbo_frame_tag dom_id(user, attribute) do %>
    # NOTE: send `attrtibute` back in case of validation error, so this page
    #       can be rendered again with params[:attribute] set.
    #                                               V
    <%= form_with model: user, url: user_path(user, attribute: params[:attribute]) do |f| %>
      <%= f.text_field attribute %>
      # NOTE: show validation errors
      <%= safe_join user.errors.full_messages_for(attribute), tag.br %>
      <%= f.submit "save" %>
    <% end %>
  <% end %>
<% else %>
  # original form here
<% end %>

# app/views/users/_user.html.erb

# NOTE: there is no need to have the whole set up for each individual
#       attribute
<% user.attribute_names.reject{|a| a =~ /^(id|something_else)$/}.each do |attribute| %>
  <%= tag.div attribute, class: "mt-4 block mb-1 font-medium" %> # tag.div - so that i can keep rb syntax highlight for stackoverflow
  <%= turbo_frame_tag dom_id(user, attribute) do %>
    <%= link_to edit_user_path(user, attribute:) do %>
      <%= user.public_send(attribute).presence || "&mdash;".html_safe %>
    <% end %>
  <% end %>
<% end %>

就是这样，每个属性都被渲染，是可编辑的，email 显示验证错误。 此外，因为所有turbo_frame_tag都有一个唯一的id ，所以索引页面上的所有内容都适用于多个用户。

---

涡轮 Stream

您还可以使用turbo_stream来获得更大的灵活性并使其更具动态性，但它更像是一个设置。 此外，添加就地编辑全名的功能，将first_name和last_name字段放在一起：

# config/routes.rb

# NOTE: to not mess with default actions, add new routes
resources :users do
  member do
    get "edit_attribute/:attribute", action: :edit_attribute, as: :edit_attribute
    patch "update_attribute/:attribute", action: :update_attribute, as: :update_attribute
  end
end

# app/views/users/_user.html.erb

# Renders user attributes.
# Required locals: user.

<%= render "attribute", user:, attribute: :email %>
<%= render "attribute", user:, attribute: :name %>

# app/views/users/_attribute.html.erb

# Renders editable attribute.
# Required locals: attribute, user.

<%= tag.div id: dom_id(user, attribute) do %>
  <%= tag.div attribute, class: "mt-4 block mb-1 font-medium" %>
  # NOTE: to make a GET turbo_stream request              vvvvvvvvvvvvvvvvvvvvvvvvvv
  <%= link_to edit_attribute_user_path(user, attribute:), data: {turbo_stream: true} do %>
    # far from perfect, but gotta start somewhere
    <% if user.attribute_names.include? attribute.to_s %>
      <%= user.public_send(attribute) %>
    <% else %>
      # if user doesn't have provided attribute, try to render a partial
      <%= render attribute.to_s, user: %>
    <% end %>
  <% end %>
<% end %>

# app/views/users/_name.html.erb

# Renders custom editable attribute value.
# Required locals: user.

<%= user.first_name %>
<%= user.last_name %>

# app/views/users/_edit_attribute.html.erb

# Renders editable attribute form.
# Required locals: attribute, user.

<%= form_with model: user, url: update_attribute_user_path(user, attribute:) do |f| %>
  <% if user.attribute_names.include? attribute.to_s %>
    <%= f.text_field attribute %>
  <% else %>
    # NOTE: same as before but with `_fields` suffix,
    #       so this requires `name_fields` partial.
    <%= render "#{attribute}_fields", f: %>
  <% end %>
  <%= f.submit "save" %>
<% end %>

# app/views/users/_name_fields.hmlt.erb

# Renders custom attribute form fields.
# Requires locals:
#   f - form builder.

<%= f.text_field :first_name %>
<%= f.text_field :last_name %>

# app/controllers/users_controller.rb

# GET /users/:id/edit_attribute/:attribute
def edit_attribute
  attribute = params[:attribute]
  respond_to do |format|
    format.turbo_stream do
      # render form
      render turbo_stream: turbo_stream.update(
        helpers.dom_id(user, attribute),
        partial: "edit_attribute",
        locals: {user:, attribute:}
      )
    end
  end
end

# PATCH  /users/:id/update_attribute/:attribute
def update_attribute
  attribute = params[:attribute]
  attribute_id = helpers.dom_id(user, attribute)
  respond_to do |format|
    if user.update(user_params)
      format.turbo_stream {
        # render updated attribute
        render turbo_stream: turbo_stream.replace(
          attribute_id,
          partial: "attribute",
          locals: {user:, attribute:}
        )
      }
    else
      format.turbo_stream {
        # render errors
        render turbo_stream: turbo_stream.append(
          attribute_id,
          html: (
            helpers.tag.div id: "#{attribute_id}_errors" do
              # FIXME: doesn't render `first_name` `last_name` errors
              helpers.safe_join user.errors.full_messages_for(attribute), helpers.tag.br
            end
          )
        )
      }
    end
  end
end

private

def user
  @user ||= User.find(params[:id])
end