STIMULUS（二） —— Hello, Stimulus

bigdevil_s 发布于2019-08-23 14:06 / 652人阅读

摘要：每个项目都是从开始的，此项目也不例外。控制器为带来生命力作为其核心，的目标是自动将元素连接到对象。检查是否生效刷新页面，你会看到任何改变都没有。在中，处理事件的控制器方法叫做操作方法。这意味这我们拥有了标准的重构技术兵工厂。

学习 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并在标签后面添加以下代码：

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

控制器为 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。在

的 data-controller 属性中添加标识符即可：

标识符充当了元素和控制器之间的链接。在此例中，标识符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到按钮上：

操作描述符（action descriptor）解释

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

click 是事件名称

hello 是控制器标识符

greet 要调用的方法名

刷新页面并打开开发者控制台。你就能在点击“Greet”按钮时看到 log 信息了。

将重要元素映射到控制器属性中

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

要实现它，首先我们需要在控制器中引用 input 元素。然后就能通过读取它的值获取输入的内容了。

Stimulus 让我们将重要元素标记为目标（target），然后我们就能轻松地在控制器中通过相应的属性引用这些元素了。打开public/index.html添加魔法属性data-target到 input 元素：

﹟目标描述符（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

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/100098.html

STIMULUS（一） —— 介绍

摘要：参考阅读是一款拥有谦逊理想的框架。这是一个受欢迎的方案，比如当你六个月后返回一个模板不记得各种东西是如何组合在一起的时候。可读的代码，也意味着团队中的其他人也能通过阅读模版或者开发者控制台，来快速地追踪行为或判断问题。参考阅读：https://chloerei.com/2018/02/... Stimulus 是一款拥有谦逊理想的 JavaScript 框架。Stimulus 不会...

wind3110991 2019-08-23 14:06 评论0 收藏0
前端开发者手册2019

摘要：年，和前端开发者与应用程序前端开发者之间产生了巨大的分歧。开发最常见的解决方案有手机和平板的原生应用程序桌面应用程序桌面应用程序原生技术最后，前端开发者可以从浏览器开发中学习到，编写代码不需要考虑浏览器引擎的限制。前端开发者手册2019 Cody Lindley 编著原文地址本手册由Frontend Masters赞助，通过深入现代化的前端工程课程来提高你的技能。下载：PDF ...

church 2019-08-02 16:18 评论0 收藏0
前端开发者手册2019

摘要：年，和前端开发者与应用程序前端开发者之间产生了巨大的分歧。开发最常见的解决方案有手机和平板的原生应用程序桌面应用程序桌面应用程序原生技术最后，前端开发者可以从浏览器开发中学习到，编写代码不需要考虑浏览器引擎的限制。前端开发者手册2019 Cody Lindley 编著原文地址本手册由Frontend Masters赞助，通过深入现代化的前端工程课程来提高你的技能。下载：PDF ...

xiao7cn 2019-08-26 13:47 评论0 收藏0
前端开发者手册2019

摘要：年，和前端开发者与应用程序前端开发者之间产生了巨大的分歧。开发最常见的解决方案有手机和平板的原生应用程序桌面应用程序桌面应用程序原生技术最后，前端开发者可以从浏览器开发中学习到，编写代码不需要考虑浏览器引擎的限制。前端开发者手册2019 Cody Lindley 编著原文地址本手册由Frontend Masters赞助，通过深入现代化的前端工程课程来提高你的技能。下载：PDF ...

邹立鹏 2019-08-30 10:56 评论0 收藏0
两句话轻松掌握python最难知识点——元类

摘要：两句话掌握最难知识点元类千万不要被所谓元类是的程序员不会用到的特性这类的说辞吓住。元类道生一，一生二一般来说，元类均被命名后缀为。这是的一大难点，但学完了元类，一切变得清晰。两句话掌握python最难知识点——元类千万不要被所谓元类是99%的python程序员不会用到的特性这类的说辞吓住。因为每个中国人，都是天生的元类使用者学懂元类，你只需要知道两句话：道生一，一生二，二生三...

enali 2019-07-30 14:45 评论0 收藏0