kotovalexarian-likes-github/haml--haml
1
0
Fork 0
mirror of https://github.com/haml/haml.git synced 2022-11-09 12:33:31 -05:00
Code Releases Activity

Update data attribute docs

Browse source 
Any hash valued attribute is now expanded, not just those with the key
'data'. Update docs accordingly.

Also change example to better show how multiple attributes are created
with the same prefix.
This commit is contained in:
Matt Wildig 2014-02-14 22:35:26 +00:00
parent ad98db704b
commit 84b9efe0bd
1 changed files with 18 additions and 10 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

28
REFERENCE.md
View file

@ -389,27 +389,35 @@ or using `true` and `false`:
%input(selected=true)
#### HTML5 Custom Data Attributes
#### Hash Valued Attributes
HTML5 allows for adding [custom non-visible data
attributes](http://www.whatwg.org/specs/web-apps/current-work/multipage/elements.html#embedding-custom-non-visible-data)
to elements using attribute names beginning with `data-`. Custom data attributes
can be used in Haml by using the key `:data` with a Hash value in an attribute
hash. Each of the key/value pairs in the Hash will be transformed into a custom
data attribute. For example:
HTML5 allows for adding
[custom non-visible data attributes](http://www.whatwg.org/specs/web-apps/current-work/multipage/elements.html#embedding-custom-non-visible-data-with-the-data-*-attributes)
to elements using attribute names beginning with `data-`. The
[Accessible Rich Internet Applications](http://www.w3.org/WAI/intro/aria)
specification makes use of attributes beginning with `aria-`. There are also
frameworks that use non-standard attributes with a common prefix.
%a{:href=>"/posts", :data => {:author_id => 123}} Posts By Author
Haml can help generate collections of attributes that share a prefix like
these. Any entry in an attribute hash that has a Hash as its value is expanded
into a series of attributes, one for each key/value pair in the hash, with the
attribute name formed by joining the “parent” key name to the key name with a
hyphen.
For example:
%a{:href=>"/posts", :data => {:author_id => 123, :category => 7}} Posts By Author
will render as:
<a data-author-id='123' href='/posts'>Posts By Author</a>
<a data-author-id='123' data-category='7' href='/posts'>Posts By Author</a>
Notice that the underscore in `author_id` was replaced by a hyphen. If you wish
to suppress this behavior, you can set Haml's
{Haml::Options#hyphenate_data_attrs `:hyphenate_data_attrs` option} to `false`,
and the output will be rendered as:
<a data-author_id='123' href='/posts'>Posts By Author</a>
<a data-author_id='123' data-category='7' href='/posts'>Posts By Author</a>
### Class and ID: `.` and `#`