如何使用Turbo::Broadcastable在目标元素外部实现插入？

问题背景 #

使用broadcast_append_to方法时，默认会将内容追加到目标元素内部末尾，但需求是将内容插入到目标div的外部之后，当前代码导致内容被包裹在目标div里，不符合预期。

解决方案 #

要在目标元素外部之后插入内容，需要使用insert_after动作替代默认的append动作，有两种实现方式：

方式1：使用broadcast_insert_to指定action: :insert_after #

修改广播代码为：

broadcast_insert_to "divs", target: "append_outside_of_me", partial: "tests/test", action: :insert_after

方式2：使用Rails 7.1+新增的broadcast_after_to快捷方法 #

如果你的Rails版本是7.1及以上，可以用更简洁的写法：

broadcast_after_to "divs", target: "append_outside_of_me", partial: "tests/test"

原理说明 #

• broadcast_append_to对应的Turbo Stream动作是append，作用是将内容添加到目标元素的内部子节点末尾。
• insert_after（或broadcast_after_to）对应的动作是insert_after，作用是将内容插入到目标元素的外部之后，完全匹配你的期望结果。

执行上述代码后，前端生成的HTML会和你期望的一致：

<div id="append_outside_of_me">
</div>
<!-- BEGIN app/views/tests/_test.html.erb -->Appended text<!-- END app/views/tests/_test.html.erb -->

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