rails：如何在表单验证后使用 Turbo 刷新列表

Question

我有点按照 Rails 教程来学习它，我想用 Turbo 来学习。

这是我的index.html.erb视图：

<%= turbo_include_tags %>

<h1>Notes</h1>
<turbo-frame id="new_note">
<%= form_with(model: Note.new, url: notes_path) do |form| %>
    <div>
        <%= form.label :content %>
        <%= form.text_area :content %>
    </div>
    <%= form.submit "Create Note" %>
<% end %>
</turbo-frame>

<turbo-frame id="notes">
<div>
    <% @notes.each do |note| %>

        <div>
            <p><span><%= note.id %></span><%= note.content %></p>
            <small> <%= note.created_at %> </small>
            <%= link_to "Destroy", note_path(note), data: { turbo_method: :delete } %>          
        </div>
    <% end %>

    <%= link_to "New note", new_note_path %>
</div>
</turbo-frame>

我的_list.html.erb模板：

<% notes.each do |note| %>
    <div>
        <p><span><%= note.id %></span><%= note.content %></p>
        <small> <%= note.created_at %> </small>
        <%= link_to "Destroy", note_path(note), data: { turbo_method: :delete } %>          
    </div>
<% end %>

这是我的控制器：

  def index
    @notes = Note.all.order(created_at: :desc)
  end
  ...
  def new
    @note = Note.new
  end

  def create
    @note = Note.new(note_params)

    if @note.save
      @notes = Note.all  # Reload all notes or fetch them as needed
      respond_to do |format|
        format.turbo_stream do
          render turbo_stream: turbo_stream.replace("notes", partial: "notes/list", locals: { notes: @notes })
        end
        format.html { redirect_to notes_url }  # Fallback in case JavaScript is disabled
      end
    else
      render :new
    end
  end
  ...

我想在单击提交按钮时创建新注释并更新列表。 我的代码中有两个问题。 第一个是验证后的表单不干净。我不知道最好的方法。

第二个是刷新列表。 它仅在我第一次单击提交按钮后有效一次。如果不刷新页面，我无法创建第二个笔记。另一个问题是新注释添加在列表的末尾而不是开头（因为我的列表是按created_at值排序的）。

Answer 1

你要

turbo_stream.update

而不是

turbo_stream.replace

，当你

replace

时你就失去了

<turbo-frame id="notes">

，这意味着第二次不起作用：

render turbo_stream: turbo_stream.update("notes", partial: "notes/list", locals: { notes: @notes })

<%= turbo_include_tags %>

是一个已弃用的助手，不应使用。

---

您不必再次重新渲染整个列表。仅将新创建的注释添加到列表中：

<!-- app/views/notes/index.html.erb -->

<div id="new_note">
  <%= render "form", note: Note.new %>
</div>

<div id="notes">
  <%= render @notes %>
</div>

<!-- app/views/notes/_note.html.erb -->

<div id="<%= dom_id note %>">
  <%= note.content %>
</div>

# app/controller/notes_controller.rb

def create
  @note = Note.new(note_params)

  respond_to do |format|
    if @note.save
      format.turbo_stream do
        render turbo_stream: [
          turbo_stream.update(:new_note, partial: "notes/form", locals: {note: Note.new}),
          turbo_stream.prepend(:notes, @note),
        ]
      end
      format.html { redirect_to notes_url(@note), notice: "Note was successfully created." }
    else
      format.turbo_stream do
        render turbo_stream: [
          turbo_stream.update(:new_note, partial: "notes/form", locals: {note: @note}),
        ]
      end
      format.html { render :new, status: :unprocessable_entity }
    end
  end
end