Creating an Action
Let's create an action in this lesson!
We'll cover the following...
Connecting a DOM event to the controller
In Stimulus, an action connects a DOM event to the controller code that you want executed when that event happens. Like controllers, Stimulus actions are also defined using a data attribute in the markup: you add the attribute to the DOM element whose events you want to watch. In our case, that’s the div element we have styled as a button:
<div class="button is-primary js--day-button"data-action="click->day-toggle#toggle"><span class="js--button-text">Hide</span></div>
The new line defining the actions is data-action="click->day-toggle#toggle". The data-action is the attribute name that signals to Stimulus that an action is being defined. The value of the data-action attribute is a little mini-language to define the connection between the event and the code.
The mini-language, which ...