Best way to handle data attributes in Slim

mmoss picture mmoss · Sep 22, 2013 · Viewed 27.5k times · Source

I was evaluating Slim as a replacement for HAML in a personal project, and it doesn't appear to handle HTML5 data attributes as gracefully as HAML. I was hoping someone may have also run into this, or may have known about an option/syntax I haven't yet found in their docs.

HAML allows you to define HTML 5 data attributes simply by using nested hashes like so:

%a{data: {key1: 'val', key2: 'val'}}

resulting in

<a data-key1='val' data-key2='val'></a>

Answer

Billy Chan picture Billy Chan · Sep 22, 2013

There are multiple ways in Slim

  1. As Hash

    Attributes which will be hyphenated if a Hash is given (e.g. data={a:1,b:2} will render as data-a="1" data-b="2")

  2. Use it directly as "mu is too short" mentioned, quite intuitive.

    a data-title="help" data-content="foo"
    
  3. Use Ruby code. I often do this and rarely above.

    = link_to 'foo', bar_path, data: {a: 'a', b: 'b'}