Stimulus リファレンス: アウトレット

この記事はGoogle翻訳の結果を編集したものです。

アウトレットを使用するとCSSセレクターを使用して別のStimulusコントローラー内からStimulusコントローラーインスタンスとそのコントローラー要素を参照できます。

アウトレットを使用するとコントローラー要素でカスタムイベントをディスパッチする代わりにコントローラー間の通信と調整が容易になります。

Stimulusターゲットと概念的には似ていますが、Stimulusコントローラーインスタンスとそれに関連付けられたコントローラー要素を参照するという違いがあります。

<div data-controller="search" data-search-result-outlet=".result">
  ...
</div>

...

<div id="results">
  <div class="result" data-controller="result">...</div>
  <div class="result" data-controller="result">...</div>
  ...
</div>

ターゲット はそれ自体のコントローラー要素の スコープ内 で明確にマークされた要素ですが、 アウトレット は ページのどこにでも 配置でき、必ずしもコントローラーのスコープ内にある必要はありません。

属性と名前

data-search-result-outlet属性はアウトレット属性と呼ばれ、その値はホストコントローラーでアウトレットとして使用できる他のコントローラー要素を参照するために使用できるCSSセレクターです。

data-[identifier]-[outlet]-outlet="[selector]"

<div data-controller="search" data-search-result-outlet=".result"></div>

定義

静的アウトレット配列を使用してコントローラークラスでコントローラー識別子を定義します。 この配列はこのコントローラーのアウトレットとして使用できる他のコントローラー識別子を宣言します。

// search_controller.js

export default class extends Controller {
  static outlets = [ "result" ]

  connect () {
    this.resultOutlets.forEach(result => ...)
  }
}

プロパティ

静的アウトレット配列で定義されたアウトレットごとにStimulusはコントローラーに5つのプロパティを追加します。ここで[name]はアウトレットのコントローラー識別子に対応します。

種類	プロパティ	返値の型	効果
存在	has[Name]Outlet	Boolean	[name]アウトレットの存在をテストします
単数	[name]Outlet	Controller	最初の[name]アウトレットのControllerインスタンスを返すか存在しない場合は例外をスローします
複数	[name]Outlets	Array<Controller>	すべての[name]アウトレットのControllerインスタンスを返します
単数	[name]OutletElement	Element	最初の[name]アウトレットのコントローラー要素を返すか、存在しない場合は例外をスローします
複数	[name]OutletElements	Array<Element>	すべての[name]アウトレットのコントローラー要素を返します

コントローラーと要素へのアクセス

[name]Outletおよび[name]Outletsプロパティからコントローラーインスタンスを取得するため、値、クラス、ターゲット、およびコントローラーインスタンスが定義する他のすべてのプロパティと関数にアクセスすることもできます。

this.resultOutlet.idValue
this.resultOutlet.imageTarget
this.resultOutlet.activeClasses

また、アウトレットコントローラーが定義する可能性のある関数を呼び出すこともできます。

// result_controller.js

export default class extends Controller {
  markAsSelected(event) {
    // ...
  }
}

// search_controller.js

export default class extends Controller {
  static outlets = [ "result" ]

  selectAll(event) {
    this.resultOutlets.forEach(result => result.markAsSelected(event))
  }
}

アウトレット要素と同様にElementの任意の関数またはプロパティを呼び出すことができます。

this.resultOutletElement.dataset.value
this.resultOutletElement.getAttribute("id")
this.resultOutletElements.map(result => result.hasAttribute("selected"))

アウトレットコールバック

アウトレットコールバックはアウトレットがページに追加またはページから削除されるたびに応答できるよう、Stimulusによって呼び出される特別な名前の関数です。

アウトレットの変化を観察するには[name]OutletConnected()または[name]OutletDisconnected()という名前の関数を定義します。

// search_controller.js

export default class extends Controller {
  static outlets = [ "result" ]

  resultOutletConnected(outlet, element) {
    // ...
  }

  resultOutletDisconnected(outlet, element) {
    // ...
  }
}

アウトレットが存在すると仮定

コントローラーのアウトレットプロパティにアクセスすると、少なくとも1つの対応するアウトレットが存在することをアサートします。宣言がなく一致するアウトレットが見つからない場合、Stimulusは例外をスローします。

Missing outlet element "result" for "search" controller

オプションのアウトレット

アウトレットがオプションの場合、または少なくともアウトレットが存在することをアサートしたい場合は、存在に関するプロパティを使用してアウトレットの存在を最初に確認する必要があります。

if (this.hasResultOutlet) {
  this.resultOutlet.safelyCallSomethingOnTheOutlet()
}

非コントローラー要素の参照

対応するdata-controllerと識別子を持たない要素をアウトレットとして宣言しようとするとStimulusは例外をスローします。

<div data-controller="search" data-search-result-outlet="#result"></div>

<div id="result"></div>

次のようになります。

Missing "data-controller=result" attribute on outlet element for
"search" controller`