我有点按照 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值排序的)。
你要
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