37

I can have

%a{href: '#', data_toggle_description_length: 'toggle_me_ajax'}

which it gives me underscores not dashes, i.e.

<a href="#" data_toggle_description_length="toggle_me_ajax"></a>

However I want to have HTML data- attributes, i.e.

<a href="#" data-toggle-description-length="toggle_me_ajax"></a>

but when I try replacing underscores with dashes, i.e.

%a{href: '#', data-toggle-description-length: 'toggle_me_ajax'}

I get syntax errors:

/home/durrantm/Dropnot/webs/rails_apps/linker/app/views/links/_links.html.haml:13: syntax error, unexpected tLABEL
...data-toggle-description-length: 'toggle_me_ajax')}>\n    tog...
...                               ^
/home/durrantm/Dropnot/webs/rails_apps/linker/app/views/links/_links.html.haml:13: syntax error, unexpected ')', expecting '}'
...ption-length: 'toggle_me_ajax')}>\n    toggleMeAjax\n  </a>\...
...                               ^
/home/durrantm/Dropnot/webs/rails_apps/linker/app/views/links/_links.html.haml:13: unknown regexp options - pa
/home/durrantm/Dropnot/webs/rails_apps/linker/app/views/links/_links.html.haml:13: syntax error, unexpected $undefined
... toggleMeAjax\n  </a>\n</span>\n", -1, false);::Haml::Util.h...
...                               ^
/home/durrantm/Dropnot/webs/rails_apps/linker/app/views/links/_links.html.haml:13: unterminated string meets end of file
/home/durrantm/Dropnot/webs/rails_apps/linker/app/views/links/_links.html.haml:13: syntax error, unexpected $end, expecting '}'
TylerH
  • 20,799
  • 66
  • 75
  • 101
Michael Durrant
  • 93,410
  • 97
  • 333
  • 497

3 Answers3

70

Try this:

%a{"data-toggle-description-length" => "toggle_me_ajax", href: "#"}

OR

%a{href: "#", :data => {:toggle_description_length => "toggle_me_ajax"}}

For more details refer here

You can also use html2haml converter available online

EDIT:

As mentioned in comments there are a couple more syntaxes which would work 

 %a{href: "#", { "data-toggle-description-length": "toggle_me_ajax" }}

OR 

%a{href: "#", { :"data-toggle-description-length" => "toggle_me_ajax" }}

I would still prefer first two though as I think latter ones look ugly and kinda messy.

Mandeep
  • 9,093
  • 2
  • 26
  • 36
  • 1
    +1 Nice catch! Yeah looks like rails will convert the underscore to dash for the second form. I like that second form so glad I can use it. – Michael Durrant Jun 22 '14 at 17:40
  • Any reason not to use the newer hash syntax there? (seems ok for cases I am trying). – Michael Durrant Jun 22 '14 at 17:41
  • @MichaelDurrant both will generate same html so i don't really think it matters. I just thought i should write both ways so you can choose yourself – Mandeep Jun 22 '14 at 17:44
  • 1
    Another option would be to use the [HTML style attributes](http://haml.info/docs/yardoc/file.REFERENCE.html#htmlstyle_attributes_): `%a(href= '#' data-toggle-description-length: 'toggle_me_ajax')`. Also converting underscores to hyphens may well be the norm in the future, not just for nested hashes as it is currently: https://github.com/haml/haml/issues/782. – matt Jun 22 '14 at 22:40
  • Also: { "data-toggle-description-length": "toggle_me_ajax" } or even { :"data-toggle-long-data-attribute" => "tickle_me_elmo" } if you like rockets. – A Fader Darkly Jun 23 '15 at 11:38
  • Using Ruby 1.9 hashes, you can do it this way: `.your_div{id: "the_id", class: "the_class", data: { some_data: "your data goes here"}}` No old style hash rockets, no strings, and the data attribute is properly formatted in the HTML. – user3670743 Sep 12 '15 at 14:24
11

There's really not much need to use { ... } style in haml. HTML style attributes are a more flexible and natural way for html generation.

%a(href="#" data-toggle="target") my link

No commas, no hash rockets etc. are required. You can also very easily interpolate or directly assign variables without switching styles.

e.g. 

%a(href=link data-toggle="#{id}-toggle")

Where link and id are variables from the currently bound scope.

Notably you can also seamlessly include attributes from xmlns, svg generation uses a lot of namespace prefixes for example:

%link(xlink:type="simple" xlink:href=link)

There's no compelling reason to use another style.

ocodo
  • 29,401
  • 18
  • 105
  • 117
  • 1
    `Because there are no commas separating attributes, though, more complicated expressions aren’t allowed. For those you’ll have to use the {} syntax` from http://haml.info/docs/yardoc/file.REFERENCE.html#htmlstyle_attributes_ – Engr. Hasanuzzaman Sumon Mar 28 '16 at 08:24
  • Your templates should not have complex expressions, it adds unnecessary problems during maintenance of the app. – ocodo Mar 28 '16 at 08:45
  • Not sure why this isn't the accepted answer. This is way better than using the general-purpose syntax of Ruby for the specific task of setting HTML attributes. For all that's wrong with HTML, attribute syntax isn't really an issue. – Andrew Koster Aug 18 '19 at 04:38
  • @AndrewKoster mostly becuase the answer came in more than a year after the original. Note that the accepted answer now has 67 votes so not sure if I should change it anyway – Michael Durrant Sep 27 '21 at 15:17
0

Something like this should work really well:

%a{ "data-user-id" => "#{@user.id}" }

davidauza.engineer
  • 269
  • 3
  • 6