Rails Turbo流在行动前

Question

我正在尝试Turbo 7。理解Hotwire引用的a操作在何处以及如何使用时有问题：

<turbo-stream action="before" target="dom_id">
  <template>
    Content to place before the element designated with the dom_id.
  </template>
</turbo-stream>

我正在使用Hotwire网站的例子。

show.html.erb:

<p style="color: green"><%= notice %></p>

<%= turbo_stream_from @room %>

<%= turbo_frame_tag "room" do %>
  <%= render @room %>

  <div>
    <%= link_to "Edit this room", edit_room_path(@room) %> |
    <%= link_to "Back to rooms", rooms_path, "data-turbo-frame": "_top" %>

    <%= button_to "Destroy this room", @room, method: :delete %>
  </div>
<% end %>

<div id="messages">
  <%= render @room.messages %>
</div>

<%= turbo_frame_tag "new_message", src: new_room_message_path(@room), target: "_top" %>

_message.html.erb

<p id="<%= dom_id message %>">
    <%= message.created_at.to_s(:short) %>: <%= message.content %>
</p>

new.html.erb

<h1>New message</h1>

<%= turbo_frame_tag "new_message", target: "_top" do %>
  <%= form_with(model: [ @message.room, @message ],
      data: { controller: "reset-form", action: "turbo:submit-end->reset-form#reset" }) do |form| %>
    <div class="field">
      <%= form.text_field :content %>
      <%= form.submit "Send" %>
    </div>
  <% end %>
<% end %>

<%= link_to "Back", @message.room %>

create.turbo_stream.erb

<%= turbo_stream.append "messages", @message %>

如何使用“前”操作将新消息插入列表的顶部？

Answer 1

要在列表的顶部插入消息，您应该使用prepend而不是append操作。这将将<turbo-stream>的内容添加为<div id="messages">的第一个子级。

# prepend
<div id="messages">
  ... new message ...
  ... old messages ...
</div>

# append
<div id="messages">
  ... old messages ...
  ... new message ...
</div>

然而，before和after操作用于添加指定元素之外的内容。无论是在它之前还是之后。

# before
... new message ...
<div id="messages">
  ... old messages ...
</div>

# after
<div id="messages">
  ... old messages ...
</div>
... new message ...

见文档。