Better Stimulusガイド 05: ライフサイクルイベントによるセットアップ・終了（翻訳）

セットアップや終了にはライフサイクルイベントを使う

🔗 1. ライブサイクルイベントを使えば、サードパーティJSライブラリとTurbolinksの互換性を完璧に保てる

Bad

import EasyMDE from "easymde"

let editors = [];

document.addEventListener("turbolinks:load", function() {
  document.querySelectorAll(".easymde").forEach(function(element) {
    let editor = new EasyMDE({ element })
    editors.push(editor)
  })
});

document.addEventListener("turbolinks:before-cache", function() {
  editors.forEach(function(editor) {
    editor.toTextArea()
  }
});

Good

<div data-controller="easymde" data-target="easymde.field">...</div>

import EasyMDE from "easymde"

export default class extends Controller {
  static targets = [ "field" ]

  connect() {
    this.editor = new EasyMDE({
      element: this.fieldTarget,
    })
  }

  disconnect() {
    this.editor.toTextArea()
  }
}

そうする理由

Stimulusの「ライフサイクルイベント」を活用すれば、追加工数をかけずに、ほとんどのJavaScriptライブラリをTurbolinksに対応させられます。インスタンスのセットアップにはconnectライフサイクルイベントを、インスタンスの終了にはdisconnectライフサイクルイベントをそれぞれ利用できます。

Stimulusは個別のインスタンスを自動的に作成するので、後で終了する必要のあるアクティブなインスタンスのリストを配列に保存しておくような手間をかける必要はありません。

Stimulusコントローラの個別のインスタンスはdata-*属性から個別の設定を読み込むので、インスタンスごとに異なる設定を使えます。

この方法が使えない場合

サードパーティのJavaScriptライブラリが、ページから機能を適切に削除するメソッドを提供しているとは限りません。

Codesandboxのサンプル

関連記事

Better Stimulusガイド:アーキテクチャ1: アプリケーションコントローラ（翻訳）