https://github.com/dcts/stmulusjs-tutorial
me learning stimulusJS
https://github.com/dcts/stmulusjs-tutorial
Last synced: 2 months ago
JSON representation
me learning stimulusJS
- Host: GitHub
- URL: https://github.com/dcts/stmulusjs-tutorial
- Owner: dcts
- License: mit
- Created: 2020-02-13T12:21:35.000Z (over 6 years ago)
- Default Branch: master
- Last Pushed: 2023-01-05T07:15:42.000Z (over 3 years ago)
- Last Synced: 2025-03-06T11:13:18.275Z (over 1 year ago)
- Language: JavaScript
- Size: 1.69 MB
- Stars: 0
- Watchers: 2
- Forks: 1
- Open Issues: 14
-
Metadata Files:
- Readme: README.md
- License: LICENSE.md
Awesome Lists containing this project
README
# Stimulus Tutorial
me learning StimulusJS. Love it!
### Run in Development
```
npm start
```
### Learnings
- builds a controller style syntax for connecting your HTML elements with JS files!
- you can tie events on html elements to action in the controller
- improves code organisation!
- **`data-controller="mycontroller"`**: defines a controller. All elements hat are part of this controller need to be nested inside this element (i belive, not sure). Also controller is identified by the filename!! So if the controller is called "test" then the file must be namer "test_controller"
- **`data-action="click->mycontroller#myaction"`**: eventlistener tied to a specific action inside a controller!
- **`data-target="mycontroller.myelement"`**: store HTML elements as instance variables inside the JS!
### HTML Example
```html
Greet
Make Background Awesome
```
### JS Example
```js
// Import controller from stimulus framework
export default class extends Controller {
// all the html elements you specified with the data-target attribute go in here as an array!
static targets = [ "inputName", "element2", "element3", "element4" ]
// functions (can be tied to an event on html elements)
greet() {
alert(`Hello, ${this.inputNameTarget.value}`);
}
printSomethingToCosole() {
console.log("something...");
}
// default function called "connect()": runs everytime the controller is connected!
// console.log to check if it worked!
connect() {
console.log("controller XYZ connected"); // controller name defined by the filename!
}
}
```