From 84b9efe0bdd461a198eab608de50b405c59118ae Mon Sep 17 00:00:00 2001 From: Matt Wildig Date: Fri, 14 Feb 2014 22:35:26 +0000 Subject: [PATCH] Update data attribute docs 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. --- REFERENCE.md | 28 ++++++++++++++++++---------- 1 file changed, 18 insertions(+), 10 deletions(-) diff --git a/REFERENCE.md b/REFERENCE.md index fcd426c6..52a41b7d 100644 --- a/REFERENCE.md +++ b/REFERENCE.md @@ -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: - Posts By Author + Posts By Author 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: - Posts By Author + Posts By Author ### Class and ID: `.` and `#`