STIMULUS（二） —— Hello, Stimulus

時間 2019-11-09

標籤 stimulus hello 简体版

原文原文鏈接

學習 Stimulus 的最簡單方式就是構建一個簡單的控制器。這一章咱們就來學習一個。html

先決條件

要往下繼續，你須要運行一個 stimulus-starter ，它是一個用於探索 Stimulus 的預配置骨架。 git

推薦使用 remixing stimulus-starter on Glitch ，這樣就能完整地在瀏覽器裏運行了，並且不須要再安裝其餘東西：
Remix on Glitchgithub

或者,若是你喜歡使用本身的溫馨的文本編輯器,您將須要克隆並設置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 起步

咱們從一個簡單的練習開始：帶按鈕的文本域。點擊按鈕時，讓文本域的值顯示在控制檯。 ide

每一個 Stimulus 項目都是從 HTML 開始的，此項目也不例外。編輯public/index.html並在<body>標籤後面添加如下代碼：學習

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

而後刷新頁面，便能看到文本域和按鈕了。ui

控制器爲 HTML 帶來生命力

做爲其核心，Stimulus 的目標是自動將 DOM 元素鏈接到 JavaScript 對象。這些對象由控制器調用。 this

咱們一塊兒來經過拖拽框架內置的控制器類建立第一個控制器。在 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.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

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。