この記事はGoogle翻訳の結果を編集したものです。
ライフサイクルコールバックと呼ばれる特別なメソッドを使用すると、コントローラーまたは特定のターゲットがドキュメントに接続したり、ドキュメントから切断したりするたびに応答できます。
import { Controller } from "@hotwired/stimulus"
export default class extends Controller {
connect() {
// …
}
}
メソッド
| メソッド | Stimulusによる呼び出し |
|---|---|
| initialize() | コントローラーが最初にインスタンス化されたときに1回 |
| [name]TargetConnected(target: Element) | ターゲットがDOMに接続されているときはいつでも |
| connect() | コントローラーがDOMに接続されているときはいつでも |
| [name]TargetDisconnected(target: Element) | ターゲットがDOMから切断されたとき |
| disconnect() | コントローラーが DOM から切断されたときはいつでも |
接続
次の両方の条件がtrueの場合、コントローラーはドキュメントに接続されます。
- その要素がドキュメントに存在する（つまり
document.documentElementの子孫である<html>要素） - その識別子は要素の
data-controller属性に存在します - コントローラーが接続されるとStimulusはその
connect()メソッドを呼び出します。
ターゲット
次の両方の条件がtrueの場合、ターゲットはドキュメントに接続されます。
- その要素は対応するコントローラーの要素の子孫としてドキュメントに存在します
- その識別子は要素の
data-{identifier}-target属性に存在します - ターゲットが接続されるとStimulusはそのコントローラーの
[name]TargetConnected()メソッドを呼び出し、ターゲット要素をパラメーターとして渡します。[name]TargetConnected()ライフサイクルコールバックは、コントローラのconnect()コールバックの前に発生します。
切断
次のシナリオのいずれかの場合など、前述の条件のいずれかがfalseになると接続されているコントローラーは後で切断されます。
-
Node#removeChild()またはChildNode#remove()を使用して、要素がドキュメントから明示的に削除されている - 要素の親要素の1つがドキュメントから削除された
- 要素の親要素の1つでその内容が
Element#innerHTML=に置き換えられている - 要素の
data-controller属性が削除または変更された - ドキュメントはTurboページの変更中などに新しい
<body>要素をインストールします - コントローラーが切断されるとStimulusはその
disconnect()メソッドを呼び出します。
ターゲット
次のいずれかのシナリオの場合など、前述の条件のいずれかがfalseになると、接続されたターゲットは後で切断されます。
-
Node#removeChild()またはChildNode#remove()を使用して要素がドキュメントから明示的に削除されている - 要素の親要素の1つがドキュメントから削除された
- 要素の親要素の1つでその内容が
Element#innerHTML=に置き換えられている - 要素の
data-{identifier}-target属性が削除または変更されている - ドキュメントはTurboページの変更中などに新しい
<body>要素をインストールします - ターゲットが切断されるとStimulusはコントローラーの
[name]TargetDisconnected()メソッドを呼び出し、ターゲット要素をパラメーターとして渡します。[name]TargetDisconnected()ライフサイクルコールバックはコントローラーのdisconnect()コールバックの前に発生します。
再接続
切断されたコントローラーは後で再び接続される場合があります。
ドキュメントからコントローラーの要素を削除してから再度アタッチした後など、これが発生するとStimulusは要素の以前のコントローラーインスタンスを再利用し、そのconnect()メソッドを複数回呼び出します。
同様に切断されたターゲットは後で再び接続される場合があります。Stimulusはコントローラーの[name]TargetConnected()メソッドを複数回呼び出します。
順番とタイミング
StimulusはDOM MutationObserver APIを使用してページの変更を非同期に監視します。
つまり、Stimulusはドキュメントに変更が加えられた後、各変更に続く次のマイクロタスクでコントローラーのライフサイクルメソッドを非同期的に呼び出します。
ライフサイクルメソッドは引き続き発生順に実行されるため、コントローラーのconnect()メソッドへの2回の呼び出しは常にdisconnect()への1回の呼び出しで区切られます。同様に特定のターゲットに対するコントローラーの[name]TargetConnected()への2回の呼び出しは、同じターゲットに対する[name]TargetDisconnected()への1回の呼び出しによって常に分離されます。