JavaScriptを有効にしてください

【Elixir】Phoenix 独自に定義したJavaScriptを実行する方法

📅 2023/9/8 · ☕ 1 分で読めます

#Elixir
#Phoenix

【Elixir】Phoenix 独自に定義したJavaScriptを実行する方法

Elixir Phoenixで独自に定義したJavaScriptを実行する方法メモ。
なぜか僕の環境ではちょっと面倒だったのでメモしました。

確認環境

Elixir 1.14.2
Phoenix 1.6.3

JavaScriptの定義

まずは適当にJavaScriptの関数を定義します。

1
2
3
4
5
// モーダル表示する関数
window.addEventListener("custom:test", (event) => {
    console.log("custom:test")
    console.log(event.detail)
})

app.js に上記のファイルを import します。

1
2
// 以下を追加
import "./custom.js"

画面側

テンプレートファイルにテスト用ボタンを追加します。

1
2
3
4
5
<button
    type="button"
    phx-click={JS.dispatch("custom:test", [ detail: %{hoge: "fuga"} ] )}>
    テストボタン
</button>

JavaScriptの実行は Phoenix.LiveView.JS の dispatch を使用します。
Phoenix.LiveView.JS

実行

実行してボタンをクリックすると下記の用に実行されます。
event.detail で渡された変数が使用できます。

1
2
3
4
5
custom:test
{
    hoge: 'fuga',
    dispatcher: button
}

参考

Custom JS events with JS.dispatch/1 and window.addEventListener

共有

著者

こぴぺたん

Copy & Paste Engineer