Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to do data- attributes with haml and rails?

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 HTML5 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 '}' 
like image 681
Michael Durrant Avatar asked Jun 22 '14 17:06

Michael Durrant


People also ask

How do you write HAML in HTML?

In Haml, we write a tag by using the percent sign and then the name of the tag. This works for %strong , %div , %body , %html ; any tag you want. Then, after the name of the tag is = , which tells Haml to evaluate Ruby code to the right and then print out the return value as the contents of the tag.

What is HAML in CSS?

Haml is a markup language that's used to cleanly and simply describe the HTML of any web document, without the use of inline code. Haml functions as a replacement for inline page templating systems such as PHP, ERB, and ASP.


2 Answers

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.

like image 163
Mandeep Avatar answered Oct 14 '22 19:10

Mandeep


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.

like image 29
ocodo Avatar answered Oct 14 '22 20:10

ocodo