Stimulus.js: actions & targets
Stimulus attaches small behaviors to server-rendered HTML. This course reads the controllers and views of one app to explain how that wiring works. It shows how a controller's file path becomes the identifier used in data-controller. It covers targets and their generated accessors. It explains actions, with the explicit event syntax and the shorthand. It also covers typed values read from data attributes, including one rendered from a Ruby constant. The last lessons show two controllers sharing one element tree and end with a small coding challenge in plain Ruby.
What you'll learn
- ✓How a controller file path becomes its data-controller identifier
- ✓Declaring targets and using xTarget, hasXTarget and xTargets
- ✓Wiring DOM events to methods with data-action, explicit or shorthand
- ✓Reading typed values from data attributes, including Ruby constants
- ✓Nesting independent controllers on one element tree
- ✓Why private # methods cannot be wired to an action
What a Stimulus controller connects
A dropdown that opens and closes, a password field with a strength meter, a dialog that closes when you click outside it: none of these needs a client-side framework rendering views in the browser. Each needs plain, server-rendered HTML with a little behavior attached to specific elements. Stimulus…
Read the full lesson free →Curriculum
7 lessonsWhat a Stimulus controller connects
Shows the app's 30 controllers, how eagerLoadControllersFrom registers them, and the class shape every controller shares.
Naming: how a file becomes an identifier
Explains the fixed rule that turns a controller's file path into an identifier like auth--password-strength or tabs.
Targets: naming one element inside the controller
Covers static targets, the three generated accessors, and using hasIconTarget to guard an optional element.
Actions: wiring a DOM event to a method
Compares the explicit event->identifier#method syntax with the shorthand, and shows a method receiving the DOM event.
Values: typed configuration from data attributes
Shows static values converting attribute text to typed values, including password limits rendered from a Ruby constant.
Composing two controllers on one element tree
Nests two password controllers on the sign-up form and explains why private # methods cannot be actions.
Putting actions and targets together
Recaps the ui--dialog wiring, shows how controller scope covers a subtree, and presents a small Ruby challenge.