當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

STIMULUS（二） —— Hello, Stimulus

發布時間：2024/1/17 编程问答 29 豆豆

生活随笔收集整理的這篇文章主要介紹了 STIMULUS（二） —— Hello, Stimulus 小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

學習 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.nameTargetconst name = element.valueconsole.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

總結

以上是生活随笔為你收集整理的STIMULUS（二） —— Hello, Stimulus的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。