Rails：Turbo Frame / Turbo Stream 元素在我触发它的第二次未渲染答案

【问题标题】：Rails: Turbo Frame / Turbo Stream element is not rendered the SECOND time I trigger itRails：Turbo Frame / Turbo Stream 元素在我触发它的第二次未渲染
【发布时间】：2022-08-19 05:48:03
【问题描述】：

在显示类别列表的视图中，下方有一小部分显示这些类别的“默认”。当用户点击那里时，它会被一个下拉表单替换，他们可以在其中选择新的默认值。提交表单后，页面的两个部分 - 类别列表以及显示默认值的下部 - 应通过 turbo 流更新。

这工作一次。如果我第二次尝试单击下部元素，即使浏览器的网络选项卡显示有东西到达，整个页面也会呈现空白。我不明白为什么会这样。

查看（索引页）：

<%= turbo_frame_tag \'settings-content\' do %>
  <h3 class=\"heading4\">Available book formats</h3>
  <ul class=\"simple-list width-33\" id=\"book-formats\">
    <%= render \'new_form_entry\' %>
    <%= turbo_frame_tag \'format-list\' do %>
      <%= render @book_formats %>
    <% end %>
  </ul>
  <h3 class=\"heading4 margin-top-1 margin-bottom-50\">Default Book Format</h3>
  <ul class=\"simple-list width-25\">
    <li>
      <%= turbo_frame_tag \'default-format\' do %>
        <%= render \'book_formats/set_default_form\' %>
      <% end %>
    </li>
  </ul>
<% end %>

控制器（相关的两种方法）：

  def set_default
    @book_formats = BookFormat.all.order(:name)
  end

  def update_default
    @new_default = BookFormat.find_by(name: book_format_params[:name])
    @default_book_format.update(fallback: false)
    @new_default.update(fallback: true)
    @default_book_format = @new_default
    @book_formats = BookFormat.all.order(:name)
  end

update_default.turbo_stream.erb

<%= turbo_stream.replace \'format-list\' do %>
      <%= render @book_formats %>
<% end %>
<%= turbo_stream.replace \'default-format\' do %>
      <%= render \'book_formats/set_default_form\' %>
<% end %>

我确定我在某处遗漏了一小块？

试试turbo_stream.update
那成功了。我不知道为什么:)

标签： ruby-on-rails turbo

【解决方案1】：

turbo_frame_tag 助手渲染一个<涡轮框架>标签和表格：

<turbo-frame id="default-format">
  <form>
    <!-- ... -->
  </form>
</turbo-frame>

turbo_stream.replace会代替目标#默认格式使用模板，在这种情况下，它只是以下形式：

<turbo-stream action="replace" target="default-format">
  <template>
    <form>
      <!-- ... -->
    </form>
  </template>
</turbo-stream>

意思是<涡轮框架>消失了：

<!-- target          identified by id -->
<!-- v               v                -->
    <turbo-frame id="default-format"></turbo-frame>

<!-- is replaced by -->
    <form></form>

<!-- end result -->
    <form></form>

第二次替换的流没有#default-format。

turbo_stream.update 操作保留目标并仅更新内容。

<!-- target          identified by id -->
<!-- v               v                -->
    <turbo-frame id="default-format"></turbo-frame>

<!-- target content is updated with -->
    <form></form>

<!-- end result -->
    <turbo-frame id="default-format">
      <form></form>
    </turbo-frame>

的目标涡轮流可以是任何东西，而不仅仅是涡轮框架：

<!-- unless you're doing something else with this frame, 
     there is no need for it -->
<%= turbo_frame_tag "format-list" do %>
  <%= render @book_formats %>
<% end %>

<!-- just an `id` is enough for turbo-stream -->
<div id="format-list">
  <%= render @book_formats %>
</div>

https://turbo.hotwired.dev/reference/streams

【讨论】：

哇！是的，我阅读了文档，但我不明白。解释的很清楚，非常感谢。