Menu
Haml Comments: -#The hyphen followed immediately by the pound sign signifies a silent comment. Any text following this isn't rendered in the resulting document at all.
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.
Haml (HTML Abstraction Markup Language) is a templating system that is designed to avoid writing inline code in a web document and make the HTML cleaner. Haml gives the flexibility to have some dynamic content in HTML.
Haml is a markup language predominantly used with Ruby that cleanly and simply describes the HTML of any web document without the use of inline code. It is a popular alternative to using Rails templating language (. erb) and allows you to embed Ruby code into your markup.
HAML Syntax for the HTML5 Data Field:
%div{ :data => {:id => '555'} }
Now, I started messing around, and it looks like this only works with "data" -- other tags need to be:
%div{ "star-datas" => "hello!" }
Your example:
%body{:data => { :spy => 'abcd'}}
I don't know why I didn't post this in the first place. The "correct" way to write your tag, <body data-spy="abcd">, in HAML, is to skip the {} entirely and use ():
%body(data-spy="abcd")
If you're not evaluating the values of the attributes as Ruby, you shouldn't be using {:key => value} syntax at all. Stick to (key="value") for static HTML attributes.
Original answer:
HAML has a specific syntax for working with data attributes which CrazyVipa's answer summarizes nicely.
For the sake of completeness, I'll point out that you can also use quoted symbol syntax, both here and anywhere else in Ruby that you want to use a hyphen in a symbol:
%body{ :"data-spy" => "abcd" }
In general, :"text" is equivalent to "text".to_sym, allowing your symbol to contain characters it normally couldn't due to parser limitations. The following are all valid symbols:
:"symbol with spaces"
:"symbol-with-hyphens"
:"symbol
with
newlines"
:"def my_func(); puts 'ok'; end"
Note that quoted symbols will not work with Ruby 1.9's new hash syntax:
{ :"key-1" => "value" } # works in 1.8/1.9
{ "key-1": "value" } # syntax error
%div{data: {some_hyphenated_id: 'value'}}
and HAML automatically converts underscores to hyphens so I get:
<div data-some-hyphenated-id="value"></div>
FYI: if you need empty attribute just use true instead of 'value'
Haml:
%div{data: {topbar: true}}
%div{data: {image_carousel: true}}
HTML:
<div data-topbar></div>
<div data-image-carousel></div>
To be more specific this syntax is valid for ruby haml gem as well as grunt task grunt-haml with language set to ruby (requires mentioned ruby haml gem installed)
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With