Tweet一覧部分のFrame化

フォーム送信時、検索アイコンクリック時に一覧部分のみ更新する
everyleaf · Dec 12, 2022 · 399b3b0 · 399b3b0
1 parent bde8807
commit 399b3b0
Show file tree

Hide file tree

Showing 3 changed files with 7 additions and 5 deletions.
diff --git a/hotwire-tw-demo/app/views/emotions/_new.html.erb b/hotwire-tw-demo/app/views/emotions/_new.html.erb
@@ -9,7 +9,7 @@
       </ul>
     </div>
   <% end %>
-  <%= form_with model: @emotion || Emotion.new do |form| %>
+  <%= form_with model: @emotion || Emotion.new, data: { turbo_frame: "emotions" } do |form| %>
     <div class="mb-3 row">
       <%= form.label :icon, "きもち", class: "col-sm-2 col-form-label" %>
       <div class="col-sm-10">

diff --git a/hotwire-tw-demo/app/views/emotions/index.html.erb b/hotwire-tw-demo/app/views/emotions/index.html.erb
@@ -3,5 +3,7 @@
 </div>
 
 <ol class="emotion-list w-100">
-  <%= render partial: "emotion", collection: @emotions %>
+  <%= turbo_frame_tag "emotions" do %>
+    <%= render partial: "emotion", collection: @emotions %>
+  <% end %>
 </ol>
diff --git a/hotwire-tw-demo/app/views/layouts/_sidebar.html.erb b/hotwire-tw-demo/app/views/layouts/_sidebar.html.erb
@@ -12,19 +12,19 @@
       <% end %>
     </li>
     <li>
-      <%= link_to root_path(icon: Emotion.icons[:love]), class: "nav-link #{active_css_class(root_path + "?icon=0")}" do %>
+      <%= link_to root_path(icon: Emotion.icons[:love]), class: "nav-link #{active_css_class(root_path + "?icon=0")}", data: { turbo_frame: "emotions" } do %>
         <%== show_icon(Emotion.icons[:love], width: 30, height: 30) %>
       <% end %>
     </li>
     <li>
-      <%= link_to root_path(icon: Emotion.icons[:angry]), class: "nav-link #{active_css_class(root_path + "?icon=1")}" do %>
+      <%= link_to root_path(icon: Emotion.icons[:angry]), class: "nav-link #{active_css_class(root_path + "?icon=1")}", data: { turbo_frame: "emotions" } do %>
         <span class="nav-icon">
         <%== show_icon(Emotion.icons[:angry], width: 30, height: 30) %>
         </span>
       <% end %>
     </li>
     <li>
-      <%= link_to root_path(icon: Emotion.icons[:smile]), class: "nav-link #{active_css_class(root_path + "?icon=2")}" do %>
+      <%= link_to root_path(icon: Emotion.icons[:smile]), class: "nav-link #{active_css_class(root_path + "?icon=2")}", data: { turbo_frame: "emotions" } do %>
         <span class="nav-icon">
         <%== show_icon(Emotion.icons[:smile], width: 30, height: 30) %>
         </span>