Turbo Frame实现订单项数量点击更新异常求助

1. 修正控制器变量计算与Turbo Stream渲染逻辑 #

在OrderItemsController#create中，必须重新计算目标商品的最新订单数量，同时确保Turbo Stream响应正确传递变量到partial：

def create
  @order_item = @order.order_items.new(order_params)
  if @order.save
    session[:order_id] = @order.id
    # 重新计算当前商品的订单数量（根据提交的参数获取对应product_id）
    target_product_id = params[:order_item][:product_id]
    @quantity = @order.order_items.where(product_id: target_product_id).count
    
    # 指定正确的目标容器ID，并通过locals传递变量到partial
    render turbo_stream: turbo_stream.replace("quantity_container", 
      partial: 'products/quantity', locals: { quantity: @quantity })
  end
end

2. 调整页面中的Turbo Frame与目标容器ID #

避免Turbo Frame和内部元素的ID冲突，修改Products页面代码：

<%= turbo_frame_tag "quantity_frame" do %>
  <div id="quantity_container">
    <%= render "products/quantity", quantity: @quantity %>
  </div>
<% end %>

3. 修改Partial使用局部变量 #

将Partial中的实例变量替换为局部变量，消除作用域问题：

<%# app/views/products/_quantity.html.erb %>
<p class="mt-3 float-end oi-qty" style="width: 10%;"><%= quantity %></p>

4. 确保表单启用Turbo #

如果提交表单未默认启用Turbo，添加data-turbo="true"属性：

<%= form_with model: @order_item, data: { turbo: true } do |f| %>
  <!-- 表单字段 -->
  <%= f.submit "添加到订单" %>
<% end %>

核心问题解析 #

• 纯文本Turbo Stream标签异常：要么是表单未启用Turbo导致普通HTML请求，要么是响应MIME类型被意外修改（Rails的render turbo_stream:会自动设置正确类型，需排查控制器是否有修改响应头的逻辑）。
• 数量未更新：原代码在create动作中未重新计算目标商品的订单数量，导致partial渲染旧值或空值。
• ID冲突：Turbo Frame与内部容器使用相同ID，导致Turbo Stream无法准确定位更新目标。

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