Rails：Turbo Frame / Turbo Stream 元素在我第二次触发它时未呈现

Question

在显示类别列表的视图中，下面有一小部分显示这些类别的“默认”。当用户单击此处时，它会被下拉表单取代，用户可以在其中选择新的默认值。提交表单后，页面的两个部分 - 类别列表以及显示默认值的下部 - 应通过 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 %>

我确定我在某个地方遗漏了一小块？

Answer 1

turbo_frame_taghelper 渲染<turbo-frame>标签和表单：

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

turbo_stream.replace将用模板替换目标#default-format，在本例中它只是形式：

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

这意味着<turbo-frame>消失：

<!-- 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.updateaction 保留目标并仅更新内容。

<!-- 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>

Turbo-stream的目标可以是任何东西，而不仅仅是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