Modern Front-End Development for Rails

Adding Our First Controller

The first thing we’re going to do with Stimulus is make a Show/Hide button that will toggle the contents of the favorite concerts block on our page.

The bulk of your Stimulus code will go into a controller, which is similar to your Rails controller in that it’s where the responses to events are stored, but different in that there’s much less structure and fewer expectations around a Stimulus controller than a Rails controller.

To invoke a controller, we add an attribute named data-controller to a DOM element on your page. The value of the attribute is the name of the controller. If we added an attribute data-controller="toggle", then Stimulus attaches it to a ToggleController, which it expects will be at controllers/toggle_controller.ts ...