Posted about 6 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>


makandra has been working exclusively with Ruby on Rails since 2007. Our laser focus on a single technology has made us a leader in this space.

Owner of this card:

Dominik Schöler
Last edit:
about 6 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