Rails Turbo Stream Before Action

Question

我正在试用Turbo和Rails 7。理解在哪里以及如何使用Hotwire引用的before操作有问题:

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

如何使用before操作将新消息插入到列表的顶部?

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

查看文档