欢迎大家来到IT世界,在知识的湖畔探索吧!
前一篇文章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
欢迎大家来到IT世界,在知识的湖畔探索吧!
然后浏览器访问http://localhost:9000/
现在先用一个按钮和一个文本框做个简单练习,点击这个按钮时,就在console中打印文本框中的内容。
打开public/index.html,在body中添加如下代码:
欢迎大家来到IT世界,在知识的湖畔探索吧!<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属性值:
欢迎大家来到IT世界,在知识的湖畔探索吧!<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的桥梁,实现复制到粘贴板的按钮
免责声明:本站所有文章内容,图片,视频等均是来源于用户投稿和互联网及文摘转载整编而成,不代表本站观点,不承担相关法律责任。其著作权各归其原作者或其出版社所有。如发现本站有涉嫌抄袭侵权/违法违规的内容,侵犯到您的权益,请在线联系站长,一经查实,本站将立刻删除。 本文来自网络,若有侵权,请联系删除,如若转载,请注明出处:https://itzsg.com/31450.html