Rails Turbo Stream提交表单后表单跳出Turbo Frame问题求助

核心问题是提交表单后，Turbo Stream仅渲染了未包裹Turbo Frame的表单partial，导致新表单脱离原Frame容器。以下是具体修复方式：

方法1：修改控制器的Turbo Stream逻辑 #

在rates_controller.rb的create方法中，保存成功后不要直接渲染表单partial，而是渲染包含Turbo Frame的完整内容（即复用rates/new.html.erb的结构）：

def create
  @rate = @rental.rates.build(rate_params)
  if @rate.save
    # 更新费率列表容器（示例，根据你的实际容器ID调整）
    turbo_stream.append('yearly_rates_container', partial: 'rates/rate', locals: { rate: @rate })
    # 替换整个Turbo Frame，确保新表单被包裹在内
    turbo_stream.replace('new_rate_frame', partial: 'rates/new', locals: { rental: @rental })
  else
    # 验证失败时，同样把带错误的表单包裹回Turbo Frame
    turbo_stream.replace('new_rate_frame', partial: 'rates/new', locals: { rental: @rental, rate: @rate })
  end
end

注意：new_rate_frame是你在rentals/show.html.erb中定义的Turbo Frame ID，需保持一致。

方法2：使用Turbo Stream模板 #

创建views/rates/create.turbo_stream.erb模板，集中编写Turbo操作逻辑，控制器无需额外处理：

<% if @rate.save %>
  <%= turbo_stream.append 'yearly_rates_container', partial: 'rates/rate', locals: { rate: @rate } %>
  <%= turbo_stream.replace 'new_rate_frame', partial: 'rates/new', locals: { rental: @rental } %>
<% else %>
  <%= turbo_stream.replace 'new_rate_frame', partial: 'rates/new', locals: { rental: @rental, rate: @rate } %>
<% end %>

控制器代码可简化为：

def create
  @rate = @rental.rates.build(rate_params)
  @rate.save
end

关键注意事项 #

• 确保Turbo Frame的ID全局唯一且固定，初始加载和后续替换操作都针对同一个ID。
• 无论表单提交成功还是失败，都要将表单重新包裹到Turbo Frame内，避免任何场景下表单脱离容器。

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