How to do data- attributes with haml and rails? -

How to do data- attributes with haml and rails? -

i can have

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

which gives me underscores not dashes, i.e.

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

however want have html5 data- attributes, i.e.

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

but when seek replacing underscores dashes, i.e.

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

i 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 '}'

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 utilize html2haml converter available online

edit:

as mentioned in comments there couple more syntaxes work

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

or

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

i still prefer first 2 though think latter ones ugly , kinda messy.

ruby-on-rails ruby-on-rails-3 haml custom-data-attribute html5-data