Vite에서 설정 자극

Stimulus은 html과 JavaScript를 연결하는 rails 팀이 만든 «modest» Lightwight 라이브러리입니다. JS와 html은 별도의 파일에 있습니다.

연결

Stimulus-docs/Installation/hello-stimulus

전제 조건

설정

$ yarn add @hotwired/stimulus stimulus-vite-helpers

참조: GitHub/stimulus-vite-helpers
frontend/controllers/index.js

import { Application } from 'stimulus'
import { registerControllers } from 'stimulus-vite-helpers'

const application = Application.start()
const controllers = import.meta.globEager('./**/*_controller.js')
registerControllers(application, controllers)

frontend/entrypoints/application.js

import '../controllers'

테스트 코드

참조: Stimulus Docs/is this thing on?
frontend/controllers/hello_controller.js

import { Controller } from "@hotwired/stimulus" 

export default class extends Controller {

    connect() { // => «connect» method is similar to initialize method in a ruby-class
        console.log("Hello, Stimulus!")
    }

    static targets = [ "name" ]

    greet() { // => doesnt matter for now, but later for the view
        const element = this.nameTarget
        const name = element.value
        console.log(`Hello, ${name}!`)
    }
}

모든 보기.haml

%div{"data-controller" => "hello"}
  %input{"data-hello-target" => "name", :type => "text"}/
  %button{"data-action" => "click->hello#greet"} Greet

.html.erb에서 보기

<div data-controller="hello">
  <input data-hello-target="name" type="text">/</input>
  <button data-action="click->hello#greet">Greet</button>
</div>

=> 페이지를 다시 로드하면 «Hello Stimulus!»가 표시됩니다. 브라우저/개발자 콘솔에서.

=> 입력란에 «User»를 입력하고 «Greet» 버튼을 클릭하면 «Hello User!»가 표시됩니다. 브라우저/개발자 콘솔에서