值

你可以使用特殊控制器属性，将控制器元素上的 HTML 数据属性作为类型化的值进行读写。

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

根据给定的 HTML 代码段，请记住将值的 data 属性放置在与 data-controller 属性相同的元素上。

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

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

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

﹟ 定义

使用 static values 对象在控制器中定义值。将每个值的名称放在左侧，将类型放在右侧。

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.replace(/_/g, ""))`
Object	`JSON.stringify(object)`	`JSON.parse(value)`
String	本身	本身

﹟ 属性和特性

Stimulus 会自动为控制器中定义的每个值生成 getter、setter 和存在性属性。这些属性链接到控制器元素上的 data 属性

类型	属性名称	效果
Getter	`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。

﹟ 更改回调

值更改回调允许你在每次值的 data 属性更改时做出响应。

在控制器中定义方法 [name]ValueChanged，其中 [name] 是你希望观察其更改的值的名称。该方法将解码后的值作为第一个参数接收，将解码后的前一个值作为第二个参数接收。

控制器初始化后，Stimulus 会调用每个更改回调，并且在关联的数据属性发生任何更改时再次调用。这包括由于分配给该值设置器而导致的更改。

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

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

﹟ 前一个值

你可以通过在控制器中使用两个参数定义回调方法来访问 [name]ValueChanged 回调的前一个值。

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

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

你可以根据需要命名这两个参数。你还可以使用 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 中将值名称写成驼峰式，在 HTML 中写成短横线式。例如，loader 控制器中的名为 contentType 的值将具有关联的数据属性 data-loader-content-type-value。

下一步：CSS 类