jquery生成兄弟节点(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

jquery生成兄弟节点(Stimulus连接HTML和JavaScript的桥梁实现简单的controller)(1)

yarn start

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

jquery生成兄弟节点(Stimulus连接HTML和JavaScript的桥梁实现简单的controller)(2)

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

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

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

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

jquery生成兄弟节点(Stimulus连接HTML和JavaScript的桥梁实现简单的controller)(3)

核心的,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元素。

jquery生成兄弟节点(Stimulus连接HTML和JavaScript的桥梁实现简单的controller)(4)

接下来我们改一下,当我们点击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中看到日志了。

jquery生成兄弟节点(Stimulus连接HTML和JavaScript的桥梁实现简单的controller)(5)

接下来要做的是当点击按钮时,对文本框中的名字说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, 你输入的名字。

jquery生成兄弟节点(Stimulus连接HTML和JavaScript的桥梁实现简单的controller)(6)

接着我们重构一下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的桥梁,实现复制到粘贴板的按钮

,

免责声明:本文仅代表文章作者的个人观点,与本站无关。其原创性、真实性以及文中陈述文字和内容未经本站证实,对本文以及其中全部或者部分内容文字的真实性、完整性和原创性本站不作任何保证或承诺,请读者仅作参考,并自行核实相关内容。文章投诉邮箱:anhduc.ph@yahoo.com

    分享
    投诉
    首页