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!