Trubo を使って複数のパーシャルを更新する

はじめに

本記事は猫でもわかるHotwire入門 Turbo編を参考にしています。
勉強中のため、誤りやもっといいやり方があるかも知れません。
その場合は、ご指摘いただけますと幸いです。

また、可能な限りわかりやすく記載するつもりですが、不明瞭な点、追記した方がいい点などがございましたら、合わせてご教授ください。

この記事の目的

コントローラーで値を更新し、画面に表示されている値だけでなく、フラッシュメッセージなど複数のパーシャルを更新したことがあると思います。
その際、やり方を調べるのに時間がかかったので、備忘録も兼ねて残しておきます。

パーシャルの記述

更新したい箇所に、タグを挿入します。

# ここに書いてあるコードはリロードされない
h2 hogeページ

= turbo_frame_tag "hoge", data: { turbo: true } do

  # データの更新に伴い、一緒にリロードしたい箇所

app/view/hoge/update.turbo_stream.slim を作成します。
このファイルは、update メソッドが呼ばれた時に読み込まれます。
create の時は、create.turbo_stream.slim にします。

# app/view/hoge/update.turbo_stream.slim

# update は、要素のコンテツのみ更新
= turbo_stream.update 'hoge'
  = render 'hoge/hogehoge'

# 共通の処理は、ApplicationHelper に定義して、呼び出すことも可能
= turbo_stream_replace_flash('route')

#############################################################
# application_helper.rb
  def turbo_stream_replace_flash(route)
    # replace は、要素も含めてすべて置き換える
    turbo_stream.replace 'flash', partial: "#{route}/flash", locals: { ver: 5 }
  end

turbo_stream.update と turbo_stream.replace の違いは、要素のコンテンツのみを更新するか、既存の要素を完全に置き換えるかの違いです。

コントローラーの記述

# app/controllers/hoge_controller.rb

class HogeController < ApplicationController
  def update
    if @hoge.save
      respond_to do |format|
        format.turbo_stream do
          flash.now[:notice] = '変更しました'
        end
      end
    else
      render :edit
    end
  end
end