Copy & Paste Engineer

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

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

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

確認環境

JavaScriptの定義

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

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

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

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

画面側

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

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

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

実行

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

custom:test
{
    hoge: 'fuga',
    dispatcher: button
}

参考