September 2022
Intermediate to advanced
410 pages
10h 7m
English
In Stimulus, an action is what connects a DOM event to the controller code that you want executed when that event happens. Like controllers, Stimulus actions are 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, we want to add a button that says “Hide”—the new button goes right after the title element that displays “Favorite Controllers”:
| | <div class="text-3xl font-bold"> |
| | Favorite Concerts |
| | <button |
| | class="<%= SimpleForm.button_class %> py-1 text-xl font-semibold" |
| | data-action="click->favorite-toggle#toggle"> |
| | Hide |
| | </button> |
| | </div> |
The line that defines the actions is data-action="click->favorite-toggle#toggle" ...