使用 hotwire 广播到多个 turbo 流

Posted 2023-02-15

【中文标题】使用 hotwire 广播到多个 turbo 流

【英文标题】：Broadcasting to multiple turbo streams with hotwire

【发布时间】：2021-06-17 20:25:05

【问题描述】：

我已经正确连接了 hotwire/turbo，以便在我页面的一个位置对单个模型执行 crud 操作，但我想在页面的不同位置同时更新同一个模型好吧。我以为我可以只设置两个流，但它似乎不起作用。

根据我命名目标的方式，指定目标确实适用于创建操作，但不适用于更新和销毁。这是我认为应该有效但无效的方法：

----位置 1（“生物”流）----

<div id="creatures">
  <%= turbo_stream_from "creatures" %>
  <%= turbo_frame_tag "creatures" do %>
    <div>
      <% @creatures.each do |creature| %>
        <div>
          <%= render "creatures/creature", creature: creature %>
        </div>
      <% end %>
    </div>
  <% end %>
</div>

----位置 2（“creatures_main”流）----

<%= turbo_stream_from "creatures_main" %>
<%= turbo_frame_tag "creatures_main" do %>
  <% @creatures.each do |creature| %>
    <div>
      <%= render "creatures/creature", creature: creature %>
    </div>
  <% end %>
<% end %>

----常见的_creature.html.erb部分----

<%= turbo_frame_tag dom_id(creature) do %>
  <%= link_to creature.name, "#" %>
<% end %>

---- 生物.rb ----

class Creature < ApplicationRecord
  validates :name, presence: true

  after_create_commit 
    broadcast_append_to "creatures"
    broadcast_append_to "creatures_main"
    
  after_update_commit 
    broadcast_replace_to "creatures"
    broadcast_replace_to "creatures_main"
    
  after_destroy_commit 
    broadcast_remove_to "creatures"
    broadcast_remove_to "creatures_main"
    

end

当我在我的模型中有两个调用时，会发生什么情况是 create 操作将新创建的生物放置在位置 1 两次，两个中只有一个被更新，但无论它们在页面上的哪个位置，它们都被正确销毁。

【参考方案1】：

creatures 和 creatures_main 将是流名称。您正在寻找的是 target 和 partial 来控制流将在哪里更新您的数据，以及它将使用哪个部分来更新。

你可以试试：

after_create_commit -> 
  # target here is the ID of the outer div, where data would be appended to
  broadcast_append_to "creatures", target: "creatures"`
  broadcast_append_to "creatures_main", target: "creatures_main"

after_update_commit 
  # target here is the ID of each of the creature div
  broadcast_replace_to "creatures", target: "creature_#id"
  broadcast_replace_to "creatures_main", target: "creature_main_#id"

after_destroy_commit 
  broadcast_remove_to "creatures"
  broadcast_remove_to "creatures_main"

<%= turbo_frame_tag "creature_#creature.id" do %>
  <%= link_to creature.name, "#" %>
<% end %>

<%= turbo_frame_tag "creature_main_#creature.id" do %>
  <%= link_to creature.name, "#" %>
<% end %>

当然，这意味着如果您在分部中有turbo_frame_tag，您可能必须使用 2 个不同的分部。你可以这样做：

after_update_commit 
  # target here is the ID of each of the creature div
  broadcast_replace_to "creatures", target: "creature_#id", partial: "creatures/creature", locals: creature: self
  broadcast_replace_to "creatures_main", target: "creature_main_#id", partial: "creatures/creature_main", locals: creature: self

顺便说一句，您应该使用这些方法的_later 版本。也可以使用渲染集合以便于阅读。