STIMULUS（二） —— Hello, Stimulus

2023年2月14日 167次阅读 来源: yunye

进修 Stimulus 的最简朴体式格局就是构建一个简朴的掌握器。这一章我们就来进修一个。

先决条件

要往下继承，你须要运转一个 stimulus-starter ，它是一个用于探究 Stimulus 的预设置骨架。

引荐运用 remixing stimulus-starter on Glitch ，如许就能够完整地在浏览器里运转了，而且不须要再装置其他东西：
Remix on Glitch

或许,假如你喜好运用本身的温馨的文本编辑器,您将须要克隆并设置stimulus-starter:

$ git clone https://github.com/stimulusjs/stimulus-starter.git
$ cd stimulus-starter
$ yarn install
$ yarn start请输入代码

然后在浏览器中接见 http://localhost:9000/。

(注重 stimulus-starter 运用 Yarn 来治理依靠，你得先装置它。)

从 HTML 起步

我们从一个简朴的演习最先：带按钮的文本域。点击按钮时，让文本域的值显如今掌握台。

每一个 Stimulus 项目都是从 HTML 最先的，此项目也不破例。编辑public/index.html并在<body>标签背面增加以下代码：

<div>
  <input type="text">
  <button>Greet</button>
</div>

然后革新页面，便能看到文本域和按钮了。

掌握器为 HTML 带来生命力

作为其中心，Stimulus 的目的是自动将 DOM 元素连接到 JavaScript 对象。这些对象由掌握器挪用。

我们一起来经由过程拖拽框架内置的掌握器类建立第一个掌握器。在 src/controllers/ 文件夹里建立一个hello_controller.js文件。然后放入以下代码：

// src/controllers/hello_controller.js
import { Controller } from "stimulus"

export default class extends Controller {
}

链接掌握器和 DOM 的标识符

下一步，我们须要通知 Stimulus 掌握器应当怎样连接到 HTML。在 <div> 的 data-controller 属性中增加标识符即可：

<div data-controller="hello">
  <input type="text">
  <button>Greet</button>
</div>

标识符充当了元素和掌握器之间的链接。在此例中，标识符hello通知 Stimulus 去hello_controller.js建立一个掌握器的实例。在装置指南中能够相识更多关于怎样动态加载掌握器。

搜检是不是见效

革新页面，你会看到任何转变都没有。我们应当怎样晓得掌握器有无见效？

一种体式格局是在 connect() 要领中增加一个 log 状况，掌握器链接到
HTML 时 Stimulus 就会触发它。

在 hello_controller.js 完成 connect()要领：

// src/controllers/hello_controller.js
import { Controller } from "stimulus"

export default class extends Controller {
  connect() {
    console.log("Hello, Stimulus!", this.element)
  }
}

革新页面，你就能够在掌握台中看到Hello, Stimulus!了。

Actions Respond to DOM Events

如今，我们看下，怎样修正代码让 log 信息在点击“Greet”按钮时显现。

起首，将 connect() 重命名为 greet()：

// src/controllers/hello_controller.js
import { Controller } from "stimulus"

export default class extends Controller {
  greet() {
    console.log("Hello, Stimulus!", this.element)
  }
}

我们想要在按钮的点击事宜触发时挪用greet()要领。在 Stimulus 中，处置惩罚事宜的掌握器要领叫做操纵（action）要领。

将 action 要领连接到按钮的点击事宜。public/index.html并增加魔法属性data-action到按钮上：

<div data-controller="hello">
  <input type="text">
  <button data-action="click->hello#greet">Greet</button>
</div>

操纵描述符（action descriptor）诠释

data-action的值 value click->hello#greet被成为操纵描述符。这里的意义是：

  • click 是事宜称号
  • hello 是掌握器标识符
  • greet 要挪用的要领名

革新页面并翻开开发者掌握台。你就能够在点击“Greet”按钮时看到 log 信息了。

将主要元素映射到掌握器属性中

我们行将完成此次演习，修正 action 使其对我们输入到文本域里的任何名字都说 hello。

要完成它，起首我们须要在掌握器中援用 input 元素。然后就能够经由过程读取它的值猎取输入的内容了。

Stimulus 让我们将主要元素标记为目的（target），然后我们就能够轻松地在掌握器中经由过程响应的属性援用这些元素了。翻开public/index.html增加魔法属性data-target到 input 元素：

<div data-controller="hello">
  <input data-target="hello.name" type="text">
  <button data-action="click->hello#greet">Greet</button>
</div>

﹟目的描述符（Target Descriptors）诠释
data-target的值hello.name被称为目的描述符. 这里的意义是：

  • hello 是掌握器标识符
  • name 是目的的称号

在我们将 name 增加到掌握器的目的描述符列表中时，Stimulus 会自动建立一个this.nameTarget属性，它会返回第一个匹配到的目的元素。我们能够运用这个属性读取元素的值并构建迎接字符串。

我们来尝尝。翻开hello_controller.js然后如许修正：

// src/controllers/hello_controller.js
import { Controller } from "stimulus"

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

  greet() {
    const element = this.nameTarget
    const name = element.value
    console.log(`Hello, ${name}!`)
  }
}

然后革新页面，翻开掌握塔。在输入框中输入你的名字，点击“Greet”按钮。Hello, world!

掌握器简化重构

我们已晓得 Stimulus 掌握器是 JavaScript 类的实例。该类的要领能够作为事宜处置惩罚器运用。

这意味这我们具有了规范的重构手艺兵工厂。比方，我们能够经由过程提取name getter 来清算 greet() 要领：

// src/controllers/hello_controller.js
import { Controller } from "stimulus"

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

  greet() {
    console.log(`Hello, ${this.name}!`)
  }

  get name() {
    return this.nameTarget.value
  }
}

总结和后续步骤

祝贺！你写出了你的第一个 Stimulus 掌握器！

本文我们覆蓋了该框架的中心观点：controllers, identifiers, actions, 和 targets。鄙人一章，我们将相识怎样组件这些东西构建正儿八经的掌握器，呃，像 Basecamp 那样。

Next: Building Something Real

    原文作者：yunye
    原文地址: https://segmentfault.com/a/1190000017395415
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞