[Stimulus] 表單及搜尋
目前接觸Basecamp 出品的 Stimulus，未來會進一步深入了解Hotwire。
Hotwire是 Drifting Ruby、Web-Crunch、Deanin 等Rails講師都已經幫忙背書的東西，加上因為好用已經踏入了Stimulus的世界，我也想要知道Hotwire是什麼。
Stimulus 還有另一個系統是專為超不喜歡寫Javascript的後端所使用的 StimulusReflex，不過個人還蠻愛Javascript的所以不會涉足StimulusReflex
不過首先這篇文章只會介紹基本的Stimulus用法，而目前寫文章的時間是Stimulus 剛剛出 Stimulus 2.0.0 的時候
本章
本章節主要會介紹
- 為什麼會想用Stimulus
- 畫面架構
- Stimulus 語法初探
- 搜尋表單
- Stimulus 可用套件
- Stimulus 如何打 API
- 自己做 auto complete
- 參考資料
畫面架構
實際上就是表單加上表單搜尋，以及對使用者加入autocomplete
Config
基本上該做的部分在下 stimulus 指令時都已經用好，但我們還是需要大概了解rails怎麼運作的。
Rails 進入點的撰寫位置會放在 webpacker.yml ，並且在app/javascript/packs/application.js 可以看到許多被 require 進來的套件或資料夾，就是我們要請 webpack 幫忙編譯與打包的東西。Stimulus 也是做類似的處理，只不過最後是import 'controllers' ，把 stimulus的內容物寫進 controllers 資料夾裡面。
Webpack 預設會先讀取 index.js 的檔案。舉例來說，如果寫了一個檔案為han_theme.scss，那麼要先在 app/javascript/style/han_theme/index.js (如果沒有該檔案就要寫)：
import 'han_theme.scss';Webpack 一層一層讀取（app/javascript/packs/application.js ）➡️ 讀到 require("styles") ➡️ 讀到 ./styles/index.js ➡️ 讀到import 'han_theme.scss';，Webpack 就會知道讀取han_theme.scss 。
更多關於webpacker的設定可以參考
同樣的，在app/javascript/controllers/index.js 也是一樣。
目前stimulus出了很多套件，星星數都不多，但畢竟都是剛出來的東西，社群也還沒像react, vue那麼多。其實基本上已經都還蠻好用的了。
用法多為先使用 yarn 安裝套件 ➡️ 在index.js import 套件 ➡️ 並且使用 register 掛入。
以使用 auto-complete 來說，可以在app/javascript/controllers/index.js 寫：
import { Application } from 'stimulus'
import { definitionsFromContext } from 'stimulus/webpack-helpers'
// 匯入套件
import { Autocomplete } from 'stimulus-autocomplete'
const application = Application.start()
const context = require.context('controllers', true, /.js$/)
application.load(definitionsFromContext(context))// 使用套件
application.register('autocomplete', Autocomplete)
使用套件的範例專案也列出來
Stimulus 語法初探
Stimulus 是 Basecamp 出產的輕量化框架，比起 react/vue，stimulus 與 rails 整合性相當好。除了基本的DOM渲染，Stimulus 使用Ajax的方式也相關方便，有了Stimulus，我們可以不用傳統的js.erb
例子1. 將原本Hello, Stimulus! 的字樣改為 Hi, <Form input>內的文字
以下為對應的 code：
stimulus.js 2.0.0 的寫法與 1.0.0 不一樣，但目前還能夠通用
關於class語法可以看這篇
例子2. 按點擊按鈕加數字
技巧為將數值運算後回填到DOM，使其有即時更新的效果。
例子3. 輸入框更新，下方文字同步更新
順道一提，例3所出現的即時更新，用普通的DOM操作亦可以實現，實現方法如下 ⬇️（來源MDN）：
例子4. 樣式元件Toggle
例子5. 更接近 remote: true 的表單送出
例子6. Dynamic Search
這邊用了一個比較笨拙的寫法。我將url寫進去hidden，只是為了打 API 用。下列search_controller.js 中的this.url() ，一共需要url、email、開始/結束時間 四個參數。很希望能夠看到更好的寫法，如果有的話請務必跟我說 😀
表單一共以使用者Email、開始時間、結束時間 、搜尋按鈕組成。我們可以看到使用者Email 使用了2個controller，該欄位綁兩個controller的target 就可以共用了。
autocomplete
使用autocomplete的效果的效果大致如上。這些有很多細節可以談，細節的部分大致上為
- 瀏覽器 autocomplete 要關掉：看了其他教學中的Form input 屬性裡面會加入
autocomplete: off的標籤。剛開始實在是不知道在幹嗎？自己用的時候發現有2個autocomplete，回頭看才明白這段指令是要關掉瀏覽器內建的autocomplete的意思
- 要設定set timeout 讓 auto complete 的效果消失，不然的話autocomplete 會一直在上面不會不見。
- 要設定 denounce：不然的話每次 autocomplete 就要打一次api，會對後端造成負擔。其實有很多地方都會加入 debounce，比方說滾動事件、點擊頁籤、加入收藏/加入購物車等等都會加入 debounce 防止快速點擊。
- 選項點擊後，將選項內容回填到表單
以下為刻auto-complete的範例：
結尾
做完之後才發現已經有人做好auto complete 的套件了
用Stimulus渲染畫面，錯誤時會出現以下畫面。看下來其實還蠻美的，就把它截圖記錄下來了。
