在Rails中使用Turbo Stream实现投诉添加后的双局部视图更新

我有Customer和Complaints两个模型，一个客户拥有多个投诉的关联关系。现在需要实现：当为客户添加投诉时，用Turbo Stream同时更新投诉索引视图和客户详情视图的两个不同局部模板，并且确保客户详情视图只显示该特定客户的投诉。

现有代码 #

Customer模型 #

class Customer < ApplicationRecord
    validates_presence_of :names
    belongs_to :company
    has_many :complaints

    broadcasts_to ->(customer) { [customer.company, "customers"] }, inserts_by: :prepend
end

Complaint模型 #

class Complaint < ApplicationRecord
    belongs_to :company
    belongs_to :customer

    # 原代码存在笔误：transgression改为complaint
    broadcasts_to ->(complaint) { [complaint.company, "complaints"] }, inserts_by: :prepend
end

投诉索引视图（complaints/index.html.erb，流式更新正常） #

<%= turbo_stream_from @company, "complaints" %>

<h1>Complaints</h1>

<%= link_to new_complaint_path, class: "btn", data: { turbo_frame: "remote_modal" } do %>
  New
<% end %>
<div class="table-responsive">
  <table class="table">
    <thead>
      <tr>
        <th scope="col">Customer</th>
        <th scope="col">Date</th>
        <th scope="col">Note</th>
        <th colspan="2"></th>
      </tr>
    </thead>
    <tbody id="complaints">
      <%= render @complaints %>
    </tbody>
  </table>
</div>

客户详情视图（customers/show.html.erb，无法流式更新） #

<%= turbo_stream_from @customer %>
<%= turbo_stream_from @customer, "complaints" %>

<%= turbo_frame_tag "customer" do %>
  <%= @customer.names %>
<% end %>

<%# 原代码存在笔误：edit_employee_path改为edit_customer_path %>
<%= link_to edit_customer_path(@customer), :class => "btn", data: { turbo_frame: "remote_modal" } do %>
  Edit
<% end %>

<h4>Complaints</h4>

<%= link_to new_complaint_path, class: "btn", data: { turbo_frame: "remote_modal" } do %>
  Add
<% end %>

<div class="table-responsive">
  <table class="table">
    <thead>
      <tr>
        <th scope="col">Date</th>
        <th scope="col">Note</th>
        <th colspan="2"></th>
      </tr>
    </thead>
    <tbody id="complaints">
      <%= render @complaints %>
    </tbody>
  </table>
</div>

解决方案 #

1. 扩展Complaint模型的广播目标 #

要让客户详情页收到更新，需要给Complaint模型添加针对所属客户的广播频道：

class Complaint < ApplicationRecord
    belongs_to :company
    belongs_to :customer

    # 保留给投诉索引页的广播
    broadcasts_to ->(complaint) { [complaint.company, "complaints"] }, inserts_by: :prepend
    # 新增给客户详情页的广播
    broadcasts_to ->(complaint) { [complaint.customer, "complaints"] }, inserts_by: :prepend
end

2. 修复重复的DOM ID问题 #

两个视图的投诉表格tbody都用了id="complaints"，会导致Turbo更新时混淆。给客户详情页的tbody设置唯一ID：

<!-- customers/show.html.erb 中的投诉表格部分 -->
<tbody id="customer_complaints_<%= @customer.id %>">
  <%= render @customer.complaints %>
</tbody>

投诉索引页的tbody保持id="complaints"即可。

3. 自定义Turbo Stream模板（可选，更灵活） #

如果默认自动广播的行为不符合需求，可以手动创建模板精确控制更新逻辑：
在app/views/complaints/create.turbo_stream.erb中添加：

<!-- 更新投诉索引页 -->
<%= turbo_stream.prepend "complaints", partial: "complaints/complaint", locals: { complaint: @complaint } %>

<!-- 更新对应客户的详情页 -->
<%= turbo_stream.prepend "customer_complaints_#{@complaint.customer.id}", partial: "complaints/complaint", locals: { complaint: @complaint } %>

同时移除Complaint模型中的broadcasts_to配置，避免重复更新。

4. 确保控制器正确赋值实例变量 #

在ComplaintsController的create方法中，确认@complaint及关联对象正确赋值：

class ComplaintsController < ApplicationController
  def create
    @complaint = current_company.complaints.new(complaint_params)
    @complaint.customer = Customer.find(params[:complaint][:customer_id])

    if @complaint.save
      respond_to do |format|
        format.turbo_stream
        format.html { redirect_to complaints_path }
      end
    else
      # 处理错误逻辑
    end
  end

  private
  def complaint_params
    params.require(:complaint).permit(:customer_id, :date, :note)
  end
end

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