Rails: Hotwire: button_to(delete)の見た目をlink_toに変更する
外観
rails-ujsを使用しない場合、link_toのmethodにはdeleteを使用できない。
今回は次の処置でrails-ujs使用時と振る舞いを似せてみた。
・scaffoldで生成する一覧ビューのlink_to(delete)をbutton_toに置き換えて項目を削除可能にする。
・CSSで見た目をlink_toに似せる。
・Stimulusで確認ダイアログを表示する。
環境
Ruby 2.7.1p83
Rails 6.1.0
hotwire-rails 0.1.1
macOS 11.1
Chrome 87.0.4280.88
Firefox 84.0.1
Safari 14.0.2
完成画面
手順
JavaScriptをスキップしたRailsアプリを作成する。
メッセージモデルの足場を用意する。
app/views/messages/index.html.erb
Destroyのlink_toをbutton_toに置き換える。
button_toはFormを生成するが、このFormのdata属性を設定するコードが少し長くなったため、ヘルパメソッドに切り出した。
button_to 'Destroy', message, method: :delete, form: form_data_window_confirm('Are you sure?')
app/helpers/application_helper.rb
Formのdata属性設定用のヘルパメソッドを用意する。
app/assets/stylesheets/scaffolds.scss
button_to配下のボタンをlink_toに似せる。
app/assets/javascripts/controllers/window_confirm_controller.js
showメソッドは確認ダイアログを表示する。
補足
Stimulus Reference- Values
SafariでValuesがロードできなかっため、messageはdatasetプロパティから取得した。Valuesを用いた取得方法はコメントアウトして残しておく。
以上です。
この記事が気に入ったらサポートをしてみませんか?