stimulus

這套框架主要在盡可能避免繁重的工作。為了能夠讓大量的介面互動維持在單純的 請求-回應 的模式，至於那些更複雜更頻繁的需求才使用先進的工具。

更重要的是，這套工具主要是針對那些小團隊希望程式的操作流程可以更加流暢，穩定並逐步擴展團隊、導入主流的方式。

試試 Stimulus 吧。
David Heinemeier Hansson

原文：https://andyyou.gitbooks.io/stimulusjs/content/00_the_origin_of_stimulus.html

如此般的開場，所以我們就來用用看吧！

安裝及使用 stimulus

參考：How to Add Stimulus.js to a Rails 6 Application

終極簡單 stimulus 安裝！會幫你下面的事情 by 龍哥

使用下列這段指令取代掉 Steps 1 ~ 4

$ rails webpack:install:stimulus

Steps

1. 移至專案目錄安裝他

yarn add stimulus

2. 在 app/javascript/ 創建一個名為 controllers 資料夾

mkdir app/javascript/controllers

3. 在裡面新增 index.js 檔案，檔案內容如下

touch app/javascript/controllers/index.js

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

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

4. 去 app/javascript/packs/application.js 檔案增加一行文字

import 'controllers'

使用它

• 使用 stimulus 檔案都要放在 app/javascript/controllers 底下，然後需要底下格式
• 命名 名字_controller.js

touch app/javascript/controllers/hello_controller.js

• js檔案內容起手式

    //導入套件
    import { Controller } from "stimulus";
    
    //內容要寫在這裡面
    export default class extends Controller {
    
    // queryselector 變數
    static targets = [ "page" ]

    //內建含式可以砍到，檢查有沒有連接上此腳本
    connect() {
        console.log(`new.js.erb do stimulus js`);
    }
    
    //自己的內容...
    //要這樣使用 targets 的變數，例如："page"，要這樣用 "this.pageTarget"
    close(){
    
        this.pageTarget.remove();
        console.log(`new.js.erb destory self`)
    }
}

• html.erb檔內連接使用語法

<div class="wallpaper" data-controller="channelbox" data-channelbox-target="page">
    <div class="channel-box">
        <button data-action="click->channelbox#close" class="close" >X</button>
        ...xxx
    </div>
</div>

• 指定哪個 controller

<!-- data-controller="channelbox" 指 channelbox_controller 檔 -->

• 增加 click 或其他 action

<!-- data-action="click->channelbox#close" 指上圖 close(){} 方法 -->

• 使用變數

<!-- data-channelbox-target="page" 指上圖 static targets = [ "page" ] -->

說明

參考：https://stimulus.hotwired.dev/reference/actions

data-channelbox-target="page"

• 原生 javascript 比較像這樣：

const page = document.querySelector('div');

data-action="click->channelbox#close"

• 原生 javascript 比較像這樣：

const btn = document.querySelector('button');

btn.addEventListener('click',(e)=>{
    close();
});

function close(){
    console.log('123')
}

如此這般～對於 stimulus 的初探到此，如果有錯在請
謝謝各位～第一天get!