Posted over 5 years ago. Visible to the public.

HAML 4+ expands nested element attributes

As you may know, HAML expands data attributes Archive that are given as a hash:

%div{ data: { count: 3 } } # results in: <div data-count="3"></div>

However, this also works for any other hash attribute. Consider an Angular directive or an Unpoly Archive compiler that is configured by several attributes. Usually you'd prefix them with the directive/compiler name so it gets clear where the attribute belongs. With HAML, this is easy to build:

%div{ lightbox: true, lightbox: { slide_count: 3, url: '...', cycle: true } } # results in: <div lightbox lightbox-slide-count="3" lightbox-url="..." lightbox-cycle="true"></div>


Your development team has a full backlog of feature requests, chores and refactoring coupled with deadlines? We are familiar with that. With our "DevOps as a Service" offering, we support developer teams with infrastructure and operations expertise.

Owner of this card:

Dominik Schöler
Last edit:
over 5 years ago
by Martin Straub
About this deck:
We are makandra and do test-driven, agile Ruby on Rails software development.
License for source code
Posted by Dominik Schöler to makandra dev
This website uses short-lived cookies to improve usability.
Accept or learn more