The best way to handle data attributes in Slim

Question

I rated Slim as a replacement for HAML in a personal project, and it doesn't seem to handle HTML5 data attributes as elegantly as HAML. I was hoping that someone might also come across this, or perhaps know about a parameter / syntax that I have not yet found in my docs.

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

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

resulting in

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

Answer 1

There are several ways in Slim

• Like a hash

  Attributes that will be carried if a hash is specified (for example, data = {a: 1, b: 2} will be displayed as data-a = "1" data-b = "2")

• Use it directly, since "mu is too short," mentioned quite intuitively.

   a data-title="help" data-content="foo" 

• Use the Ruby code. I often do this and rarely above.

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

Answer 2

Use the splat operator:

 h1#section-title*{'data-url'=>'test', 'data-id'=>'test'} = @project.name 

Answer 3

I prefer this type to be fixed ...

 @products.each do |product| .module data-id=product.id 

He works for me

Answer 4

 .your-class*{data: {first_attribute: 'first value', second_attribute: 'second value'} } 

Will produce

 <div class="your-class" data-first_attribute="first value" data-second_attribute="second value"></div>