嵌套 turbo_frame_tag 中的 Rails Hotwire 可操作流答案

【问题标题】：Rails Hotwire actioncable stream in nested turbo_frame_tag嵌套 turbo_frame_tag 中的 Rails Hotwire 可操作流
【发布时间】：2022-01-02 22:04:06
【问题描述】：

在an article 之后，我正在试用 Rails Hotwire，并希望创建一个像单页应用程序一样工作的简单博客（即使用 turbo_stream 来处理帖子和 cmets，而无需重新加载整个页面）。我还想通过对所有连接的浏览器实时进行 crud 操作来同时使用 actioncable。

到目前为止，当我显示特定帖子（即posts/show）时，除了帖子上的 cmets 的实时部分外，它正在工作。

这可能与我用于turbo_frame_tags 的标识符和/或我broadcast 的方式有关，但我似乎找不到答案。我查看了this question 和GoRails example of something similar，但它仍然不起作用。

我现在的posts/index

<%= turbo_stream_from "posts" %>

<div class="w-full">
  [...]
  <div class="min-w-full">
    <%= turbo_frame_tag :posts do %>
      <%= render @posts %>
    <% end %>
  </div>
</div>

每篇文章的部分内容如下：

<%= turbo_frame_tag post do %>
  <div class="bg-white w-full p-4 rounded-md mt-2">
    <h1 class="my-5 text-lg font-bold text-gray-700 text-4xl hover:text-blue-400">
      <%= link_to post.title, post_path(post) %>
    </h1>
   [...]
  </div>
<% end %>

posts/show 将每个帖子的当前部分替换为更详细的版本：

<%= turbo_stream_from @post, :comments %>

<%= turbo_frame_tag dom_id(@post) do %>
  [...]
    <div class="w-full bg-white rounded-md p-4 justify-start mt-1">
      <div class="w-full pt-2">
        <turbo-frame id="total_comments" class="mt-2 text-lg text-2xl mt-2 tex-gray-50">
          <%= @post.comments.size %> comments
        </turbo-frame>
        <%= turbo_frame_tag "#{dom_id(@post)}_comments" do %>
          <%= render @post.comments %>
        <% end %>
        [...]
      </div>
    </div>
  </div>
<% end %>

各自的模型是：

class Post < ApplicationRecord
  validates_presence_of :title
  has_rich_text :content
  has_many :comments, dependent: :destroy
  after_create_commit { broadcast_prepend_to "posts" }
  after_update_commit { broadcast_replace_to "posts" }
  after_destroy_commit { broadcast_remove_to "posts" }
end

和

class Comment < ApplicationRecord
  include ActionView::RecordIdentifier

  belongs_to :post
  has_rich_text :content

  after_create_commit do
    broadcast_append_to [post, :comments], target: "#{dom_id(post)}_comments", partial: 'comments/comment'
  end

  after_destroy_commit do
    broadcast_remove_to self
  end
end

_comment 部分是

<%= turbo_frame_tag dom_id comment do %>
  <div class="container w-full mx-auto bg-white p-4 rounded-md mt-2 border-b shadow">
    <%= comment.content %> - <%= time_tag comment.created_at, "data-local": "time-ago" %>
    [...]
  </div>
<% end %>

如前所述，帖子工作的实时 crud 工作而不是他们的 cmets。知道我做错了什么吗？提前致谢。

【问题讨论】：

标签： ruby-on-rails actioncable hotwire-rails

【解决方案1】：

我找到了解决方案。这只是将流放在哪里的问题：

在show 中，<%= turbo_stream_from @post, :comments %> 应该在<%= turbo_frame_tag dom_id(@post) do %> 之后。

_comment 部分应该是这样的

<%= turbo_stream_from comment %>
<%= turbo_frame_tag dom_id comment do %>
 [...content]
  </div>
<% end %>

hotwired board有更详细的解释

【讨论】：