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>

UI/UX Design by

We make sure that your target audience has the best possible experience with your digital product. You get:

• Design tailored to your audience
• Proven processes customized to your needs
• An expert team of experienced designers

Read more Show archive.org snapshot

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!