目标

目标让你通过名称引用重要元素。

<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>

﹟ 定义

使用 static targets 数组在控制器类中定义目标名称

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

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

﹟ 属性

对于在 static targets 数组中定义的每个目标名称，Stimulus 会向你的控制器添加以下属性，其中 [name] 对应于目标的名称

注意：当没有匹配元素时，访问单数目标属性会引发错误。

﹟ 共享目标

元素可以具有多个目标属性，并且目标通常由多个控制器共享。

<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 访问。

在 checkbox 控制器中，this.inputTargets 返回一个包含两个复选框的数组。

﹟ 可选目标

如果你的控制器需要使用可能存在或不存在的目标，请根据存在性目标属性的值设置代码条件

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

﹟ 已连接和已断开回调

目标元素回调允许您在目标元素在控制器元素内添加或移除时做出响应。

在控制器中定义一个方法 [name]TargetConnected 或 [name]TargetDisconnected，其中 [name] 是您想要观察其添加或移除的目标的名称。该方法将元素作为第一个参数接收。

在 connect() 之后和 disconnect() 生命周期挂钩之前，每当添加或移除其目标元素时，Stimulus 都会调用每个元素回调。

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 实例将暂停。这意味着，如果回调添加或移除具有匹配名称的目标，则不会再次调用相应的回调。

﹟ 命名约定

始终使用驼峰式大小写来指定目标名称，因为它们直接映射到控制器上的属性

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

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

下一步：出口