Stimulus
A modest JavaScript framework for the HTML you already have
既存のHTMLがある状態で、それを最小限のJSにmapする
なんかモダンjQueryみたいな感じだなmrsekut.icon
ReactみたいにHTMLとJSを同時に書くのではなく、
jQueryみたいに、HTMLとJSを別々に書いて、attrとかで対応付けてDOM操作をする
例
code:html
<!--HTML from anywhere-->
<div data-controller="hello">
<input data-hello-target="name" type="text">
<button data-action="click->hello#greet">
Greet
</button>
<span data-hello-target="output">
</span>
</div>
code:hello_controller.js
// hello_controller.js
import { Controller } from "stimulus"
export default class extends Controller {
greet() {
this.outputTarget.textContent =
Hello, ${this.nameTarget.value}!
}
}
HTML内でdata-controllerとかdata-hello-targetなどの指定をすることで、hello_controller.jsと対応付けている
すると、JS内でthis.outputTargetとかthis.nameTargetとかでDOMの中身を見れる
greet()の中を見ると、
inputに入った値を
spanタグの中に入れる
みたいなことを書いているのがわかる