【Ruby on Rails】Stimulus是一個酷東西！

2022-11-27

什麼是Stimulus?它可以做什麼？

提供rails一個可以寫JavaScript的空間。
Stimulus是一種輕量JS框架，主要在HTML上操作，data就是他開始貼標籤的地方。
它可以簡化JS抓DOM元素的繁雜過程。
主要核心是Controllers、action、target，做成類似rails 路徑名稱那樣的標籤，包在div、button…任何的<>裡面。

前置作業：安裝stimulus套件

在專案資料夾輸入rails查看可以裝什麼框架

找到想裝的框架再輸入（同樣適用於圖片上的其他框架）

1	rails webpacker:install:stimulus

這樣webpacker就會在javascript的資料夾幫我們做好stimulus需要的資料夾

app/javascript/controllers 這是JS版controller的家，裡面有一個index檔案是使套件可以正常使用的程式碼

import { Application } from "stimulus"
import { definitionsFromContext } from "stimulus/webpack-helpers"

const application = Application.start()
const context = require.context("controllers", true, /_controller\.js$/)
application.load(definitionsFromContext(context))

app/javascript/controllers/hello_controller.js 是一個範例檔，主要用法就是用import接收erb檔設定的controller傳來的訊息，並用export回傳接下來要做的動作。

import 'controllers'

 export default class extends Controller {
    static targets = [ "icon" ]
 
    connect() {
    console.log("hello")
    }
  }

在export default class extends Controller{}裡可以放任何controller所需要用到的function

常用

1
2
3

connect()：連接上時的觸發事件，可以用來測試是否連接
initialize():可使用於設定初始狀態
static targets =[]：抓設定data-xxx-target的關鍵字（使用陣列放多個target）

stimulus運作

stimulus核心三兄弟的運作，我自己理解到的運作模式大概是這樣：

Controller

1	data-controller="favorite-btn"

這塊地歸我管囉（插一個favorite-btn的旗子，建立favorite-btn_controller辦事處）

用於設定我們要建立controller的控制範圍及名稱，範圍可大可小，小至一個按鈕，大可以到一整個html，但盡量讓控制範圍小一點比較方便維護。

註：檔名為 XXX_controller.js (這個XXX要跟後來設定的data-controller名稱一樣，不然會抓不到)

Action：

1	data-action="click->favorite-btn#toggle"

我幫你看看favorite-btn有沒有發生什麼事件。
發生點擊事件(click)的時候我會叫你的toggle部門出來做事的！

相當於JavaScript的addEventListener，但不限定只有click之類的預設事件，可以設定範圍，例如update-quantity@document->order-amount#updateQuantity就代表在document的範圍內監聽update-quantity事件出現，就到order-amount進行updateQuantity的動作。

Target：欸那個新來的，現在開始你的名字叫做icon，我叫你做什麼就做什麼

1	data-favorite-btn-target="icon"

相當於JavaScript的document.querySelector(“”)、或是其他抓DOM元素系列的指令。搭配在export default class extends Controller裡的設定：static targets = [ "icon" ]就是抓到icon這個Target，並可以使用iconTarget進行操作（例如：iconTarget.textContent="" 等）。

結論

最近的Ruby on rails課程提到該如何將JavaScript寫進Rails專案，提到了Stimulus，它不但可以用類似於rails裡面Controller的操作方式決定接下來要做什麼，還可以方便的取用DOM元素，使用AJAX概念紀錄當前操作結果節省網路傳輸，並且集中的controller資料夾能使檔案變得更好管理。

參考連結：官方手冊、Github