Stimulus リファレンス: ターゲット

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

ターゲットを使用すると重要な要素を名前で参照できます。

<div data-controller="search">
  <input type="text" data-search-target="query">
  <div data-search-target="errorMessage"></div>
  <div data-search-target="results"></div>
</div>

属性と名前

data-search-target属性はターゲット属性と呼ばれ、その値はsearchコントローラーで要素を参照するために使用できるターゲット名のスペース区切りのリストです。

<div data-controller="s​earch">
  <div data-search-target="results"></div>
</div>

定義

静的ターゲット配列を使用してコントローラークラスでターゲット名を定義します。

// controllers/search_controller.js
import { Controller } from "@hotwired/stimulus"

export default class extends Controller {
  static targets = [ "query", "errorMessage", "results" ]
  // …
}

プロパティ

静的ターゲット配列で定義されたターゲット名ごとにStimulusは次のプロパティをコントローラーに追加します。[name]はターゲットの名前に対応します。

種類	名前	値
単数	this.[name]Target	スコープ内で最初に一致するターゲット
複数	this.[name]Targets	スコープ内のすべての一致するターゲットの配列
存在	this.has[Name]Target	スコープ内に一致するターゲットがあるかどうかを示すブール値

注： 単一のターゲットプロパティにアクセスすると一致する要素がない場合にエラーがスローされます。

共有ターゲット

要素は複数のターゲット属性を持つことができ、ターゲットが複数のコントローラーによって共有されるのが一般的です。

<form data-controller="search checkbox">
  <input type="checkbox" data-search-target="projects" data-checkbox-target="input">
  <input type="checkbox" data-search-target="messages" data-checkbox-target="input">
  …
</form>

上記の例ではチェックボックスはsearchコントローラー内でそれぞれthis.projectsTargetおよびthis.messagesTargetとしてアクセスできます。

チェックボックスコントローラー内でthis.inputTargetsは両方のチェックボックスを含む配列を返します。

オプションのターゲット

コントローラーが存在するかどうかわからないターゲットと連携する必要がある場合、存在するターゲットプロパティの値に基づいてコードを調整します。

if (this.hasResultsTarget) {
  this.resultsTarget.innerHTML = "…"
}

接続および切断されたコールバック

ターゲット要素のコールバックを使用するとコントローラーの要素内でターゲット要素が追加または削除されるたびに応答できます。

[name]TargetConnectedまたは[name]TargetDisconnectedをコントローラーでメソッドを定義します。[name]は追加または削除を監視するターゲットの名前です。このメソッドは要素を最初の引数として受け取ります。

Stimulusはconnect()の後、disconnect()ライフサイクルフックの前にターゲット要素が追加または削除されるたびに各要素のコールバックを呼び出します。

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

  itemTargetConnected(element) {
    this.sortElements(this.itemTargets)
  }

  itemTargetDisconnected(element) {
    this.sortElements(this.itemTargets)
  }

  // Private
  sortElements(itemTargets) { /* ... */ }
}

注 [name]TargetConnectedおよび[name]TargetDisconnectedコールバックの実行中、MutationObserverインスタンスはバックグラウンドで一時停止されます。これはコールバックが一致する名前を持つターゲットを追加または削除した場合、対応するコールバックが再度呼び出されないことを意味します。

命名規則

ターゲット名はコントローラーのプロパティに直接マップされるため、常にcamelCaseを使用してターゲット名を指定します。

<span data-search-target="camelCase" /> 
<span data-search-target="do-not-do-this" />

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