LoginSignup
0
0

TurboをJavaScriptから操作する実践例

Posted at

はじめに

本記事は錆びかけたRailsの知識を頑張ってアップデートするアドベントカレンダー17日目です。

Turboの公式ドキュメントには、TurboをJavaScriptから操作するための方法が載っています。

例えば、以下のような形です。

fejiwaewua.png
(引用: https://turbo.hotwired.dev/reference/drive)

こちらの実践的な使い方がなかなか思いつかなかったのですが、Turboの参考となる情報ソースの1つ、GO RAILSにわかりやすいかつ面白い例があったので紹介します。

Turboで非同期による画面切り替えを行うセレクトボックスを作る

セレクトボックスのonChangeオプションにJavaScriptを文字列で直接書き込むことにより、セレクトボックスで何らかの選択肢が選択されるたびに、そのJavaScriptが実行される、というものです。

_navigation.html.erb
<%= select_tag nil, options_for_select(items), class: "sm:hidden", onChange: "Turbo.visit(this.selectedOptions[0].value)" %>

このときselect_tagのオプションは選択肢(ページの名前)と実際のパスとのペアが入った二次元配列でした。

セレクトボックスが選択されるとTurbo.visit()が実行され、選択したページのパスへ非同期でリクエストを送る、ということのようです。

select_tagのonChangeオプションについて

あまり利用している例を見ないオプションですが、このオプション自体はかなり前から存在しているようです。

options_for_select(items)のitemsについて

以下のような二次元配列になっています。

_navigation.html.erb
items = [
  ["Home", root_path],
  ["Calendar", calendar_path],
  ["Projects", projects_path],
  ["Tasks", tasks_path],
  ["Announcements", announcements_path]
]

Turbo.visitの引数がhoge_pathとなります。

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0