Search⌘ K
AI Features
Home
Courses
Modern Front-end Development for Rails

Using Stimulus with Haml or Slim

Explore how to use Stimulus in Rails applications with HTML replacement tools Haml and Slim. Understand how to set data attributes correctly and simplify syntax for seamless JavaScript behavior integration. This lesson helps you apply Stimulus conventions in templating languages to build interactive front-end features before moving on to React.

We'll cover the following...

Since Stimulus depends so much on HTML attribute names, you might wonder how Stimulus works in HTML replacement tools like Haml and Slim.

Haml generally treats attribute lists as Ruby hashes, so you can do this:

%section.day-body{"data-controller": "day-toggle",
  "data-day-toggle-active": "false",
  "data-day-toggle-class-name": "is-hidden"}>

You need the quotation marks around the attribute names because Ruby symbol literals can’t ...