Stimulus:连接HTML和JavaScript的桥梁，实现简单的controller

前一篇文章Stimulus：连接HTML和JavaScript的桥梁我们介绍了Stimulus。

本文，我们创建一个简单的controller，这也是学习Stimulus如何工作的最佳方式。

做好准备

要进行下面的操作，您需要一个可以运行的Stimulus -starter项目的副本，它是一个预配置的空白页，用于探索Stimulus。

你需要先下载并设置好stimulus-starter

$ git clone https://github.com/hotwired/stimulus-starter.git 
$ cd stimulus-starter 
$ yarn install 
$ yarn start

然后浏览器访问http://localhost:9000/

现在先用一个按钮和一个文本框做个简单练习，点击这个按钮时，就在console中打印文本框中的内容。

打开public/index.html，在body中添加如下代码：

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

刷新页面，就可以看到文本框和按钮了

核心的，Stimulus的目标是自动连接DOM元素与JavaScript对象。这些JavaScript对象被称作控制器（controller）。

通过扩展框架的内置controller类来创建第一个controller。在src/controllers文件夹内创建一个hello_controller.js文件，写如下代码：

import { Controller } from "@hotwired/stimulus"

export default class extends Controller {

}

下一步，我们需要告诉Stimulus这个controller如何连接到HTML。只需要在<div>添加data-controller属性值：

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

这个属性值可以看作是元素和控制器之间的连接。在这个例子中，”hello“告诉Stimulus创建一个实例，所属类是定义在hello_controller.js中的类。

如果浏览器此时刷新页面，不会看到任何改变。那我们怎么知道控制器是否生效了呢？

检验的方法就是，在controller内添加一个connect()方法，在方法里加入打印一行日志。当controller被连接到页面元素时，Stimulus会调用这个connect方法。

import { Controller } from "@hotwired/stimulus"

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

刷新页面，在console中就会看到Hello，Stimulus！紧跟着是一个div元素。

接下来我们改一下，当我们点击Greet按钮时，在console打印日志。

把connect()改成greet()

import { Controller } from "@hotwired/stimulus"

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

我们希望点击按钮时，调用greet()方法。在Stimulus中，用来处理事件的方法被称作action方法。

为了连接action方法与按钮的点击事件，打开public/index.html，在button上添加data-action属性：

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

解释一下data-action:

data-action的值click->hello#greet，叫做动作描述符（action descriptor）。

click是事件名称。

hello是控制器标识符。

greet是要触发的方法名称。

刷新页面，然后点击按钮，你应该能在console中看到日志了。

接下来要做的是当点击按钮时，对文本框中的名字说hello。

为了做到这一点，我们需要在controller中添加一个input元素的引用，通过它可以读取属性值。

Stimulus中可以标记重要的元素为targets，因此，我们可以很容易地通过相应的属性在controller中引用它们。打开public/index.html，给input元素添加data-hello-target属性。

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

下一步，我们要在controller中定义一个target列表，添加一个目标名为name的字符串。

import { Controller } from "@hotwired/stimulus"

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

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

然后刷新页面，打开console，在输入框输入一个名字，点击按钮，console里会打印hello, 你输入的名字。

接着我们重构一下greet()方法，提取出一个name()方法。

import { Controller } from "@hotwired/stimulus"

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

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

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

好了，至此，已经完成了第一个Stimulus controller。

通过本文，大概了解了controller，action，和target这3个概念。下一篇我们再看一下如何使用Stimulus，做个 点击按钮复制文本到粘贴板 的功能。

Stimulus：连接HTML和Javascript的桥梁，实现复制到粘贴板的按钮