Stimulus リファレンス: 値

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

特別なコントローラープロパティを使用してコントローラー要素のHTMLデータ属性を型付きの値として読み書きできます。

<div data-controller="loader"
     data-loader-url-value="/messages">
</div>

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

export default class extends Controller {
  static values = {
    url: String
  }

  connect() {
    fetch(this.urlValue).then(/* … */)
  }
}

定義

静的値オブジェクトを使用してコントローラーで値を定義します。各値の名前を左側に、その型を右側に配置します。

export default class extends Controller {
  static values = {
    url: String,
    interval: Number,
    params: Object
  }

  // …
}

型

値の型はArray、Boolean、Number、Object、またはStringのいずれかです。型は値がJavaScriptとHTMLの間でどのようにトランスコードされるかを決定します。

型	エンコードの型	デコードの型
Array	JSON.stringify(array)	JSON.parse(value)
Boolean	boolean.toString()	!(value == "0" || value == "false")
Number	number.toString()	Number(value)
Object	JSON.stringify(object)	JSON.parse(value)
String	それ自身	それ自身

プロパティと属性

Stimulusはコントローラーで定義された各値のゲッター、セッター、および存在のプロパティを自動的に生成します。これらのプロパティはコントローラーの要素のデータ属性にリンクされています。

種類	プロパティ	効果
ゲッター	this.[name]Value	data-[identifier]-[name]-valueの読み込み
セッター	this.[name]Value=	data-[identifier]-[name]-valueの書き込み
存在	this.has[Name]Value	data-[identifier]-[name]-valueのテスト

ゲッター

値のゲッターは関連付けられたデータ属性を値の型のインスタンスにデコードします。

コントローラーの要素にデータ属性がない場合、ゲッターは値の型に応じてデフォルト値を返します。

型	デフォルト値
Array	[]
Boolean	false
Number	0
Object	{}
String	""

セッター

値のセッターはコントローラーの要素に関連するデータ属性を設定します。

コントローラーの要素からデータ属性を削除するには値にundefinedを割り当てます。

存在プロパティ

値の存在プロパティは関連付けられたデータ属性がコントローラーの要素に存在する場合はtrueに評価され、存在しない場合はfalseに評価されます。

コールバックの変更

値変更コールバックを使用すると、値のデータ属性が変更されるたびに応答できます。

コントローラーでメソッド[name]ValueChangedを定義します。[name]は変更を監視する値の名前です。このメソッドはデコードされた値を最初の引数として受け取り、デコードされた前の値を2番目の引数として受け取ります。

Stimulusはコントローラーが初期化された後、関連するデータ属性が変更されるたびに各変更コールバックを呼び出します。これには値のセッターへの割り当ての結果としての変更が含まれます。

export default class extends Controller {
  static values = { url: String }

  urlValueChanged() {
    fetch(this.urlValue).then(/* … */)
  }
}

以前の値

[name]ValueChangedコールバックの以前の値にアクセスするにはコントローラーで2つの引数を使用してコールバックメソッドを定義します。

export default class extends Controller {
  static values = { url: String }

  urlValueChanged(value, previousValue) {
    /* … */
  }
}

2つの引数には好きな名前を付けることができます。urlValueChanged(current, old)を使用することもできます。

デフォルト値

コントローラー要素で指定されていない値はコントローラー定義で指定されたデフォルトで設定できます。

export default class extends Controller {
  static values = {
    url: { type: String, default: '/bill' },
    interval: { type: Number, default: 5 },
    clicked: Boolean
  }
}

デフォルトが使用される場合、{ type, default }の展開された形式が使用されます。この形式はデフォルトを使用しない通常の形式と混在させることができます。

命名規則

値の名前はJavaScriptでは camelCase、HTMLではkebab-caseとして記述します。たとえばloaderコントローラーのcontentTypeという名前の値には、関連付けられたデータ属性data-loader-content-type-valueがあります。