HAML 4+ expands nested element attributes

As you may know, HAML expands data attributes Show archive.org snapshot 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 Show archive.org snapshot 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>

Awesome!

Dominik Schöler Over 7 years ago