Modern Front-End Development for Rails

Creating an Action

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”:

chapter_03/02/app/views/favorites/_list.html.erb

<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 new line defining the actions is data-action="click->favorite-toggle#toggle". The data-action is the attribute name that signals ...