An action is a connection between:
- a controller method
- the controller’s element
- a DOM event listener
gallery_controller.js
// controllers/gallery_controller.js
import { Controller } from "stimulus"
export default class extends Controller {
next(event) {
alert("Justclick !!! :")
}
}
View File Setup
<div data-controller="gallery">
<button data-action="click->gallery#next">…</button>
</div>
Descriptors
The data-action value click->gallery#next is called an action descriptor. In this descriptor:
- click is the name of the DOM event to listen for
- gallery is the controller identifier
- next is the name of the method to invoke
The full set of these shorthand pairs is as follows:
I hope that helps someone. Thanks :).
Thanks for reading. 🙂
I’d love to hear thoughts or comments around this. Feel free to email me at ronakabhattrz@gmail.com or hit me up on twitter, @ronakabhattrz.
Top comments (0)