Turbo Frame下Render :edit未按预期工作：两步预订表单异常

问题描述 #

使用turbo-rails开发两步式预订表单，预期流程为：用户选择日期点击「Next Step」后，系统保存BookingDate记录，同时保留可编辑的日期选择器并展示对应日期的可用项目。实际问题是：保存日期后跳转到booking_dates/index页面，无法保留编辑状态的日期选择器。

问题根源 #

1. 控制器create方法未处理TURBO_STREAM格式请求，Turbo默认 fallback 到发起GET /booking_dates请求
2. 表单模板中嵌套重复的turbo_frame_tag，导致Turbo无法准确定位替换目标

修复步骤 #

1. 为控制器添加Turbo Stream响应 #

修改controllers/booking_dates_controller.rb的create方法，新增format.turbo_stream处理分支，让Turbo能正确接收并更新页面组件：

def create
  @booking_date = BookingDate.new(booking_date_params)
  respond_to do |format|
    if @booking_date.save
      format.html { render :edit, location: @booking_date }
      format.json { render :show, status: :created, location: @booking_date }
      format.turbo_stream { render :edit } # 新增Turbo Stream响应
    else
      format.html { render :new }
      format.json { render json: @booking_date.errors, status: :unprocessable_entity }
      # 错误时也返回Turbo Stream，更新表单显示错误
      format.turbo_stream do
        render turbo_stream: turbo_stream.replace(
          @booking_date, 
          partial: "booking_dates/cust_form", 
          locals: { booking_date: @booking_date }
        )
      end
    end
  end
end

2. 移除表单中重复的Turbo Frame #

当前views/booking_dates/_cust_form.html.erb中嵌套了turbo_frame_tag，而_main.html.erb已经用Frame包裹了表单，重复嵌套会导致替换冲突。修改表单模板：

<%= simple_form_for(@booking_date) do |f| %>
  <%= f.date_field :start_date %>
  <%= f.date_field :end_date %>
  <%= f.submit value: "Next step" %>
<% end %>

3. 确认Edit模板的Frame正确性 #

保留views/booking_dates/edit.html.erb的Frame结构，确保与_main.html.erb中的Frame ID一致（Turbo会自动使用模型的dom_id，如booking_date_123）：

<%= turbo_frame_tag @booking_date do %>
  <%= render "booking_dates/cust_form", booking_date: @booking_date %>
<% end %>

修复原理 #

• 添加format.turbo_stream后，Turbo会接收流响应并精准替换页面中匹配ID的Turbo Frame，避免跳转
• 移除重复Frame确保替换目标唯一，让Turbo能正确定位并更新表单区域

内容的提问来源于stack exchange，提问作者perissf