-
Notifications
You must be signed in to change notification settings - Fork 15
Attribute Hash {}
Hashes are like PHP arrays. Except much cooler! When setting up a hash keep that in mind. The are two main differences:
- You don't have to quote the "indexes" (in our case, the attributes names). And we kept the ruby syntax :att_name enabled.
- You have to encapsulate php expressions inside {} anytime it has a , (comma) inside it.
NOTE: We are not trying to be Rubyish. The reason why we sometimes allow a Ruby like syntax is because we believe it makes the transition easier and makes the language more compatible with existing syntax highlighted editors.
There are many ways to set an attribute's value.
-
Using literals and variables
%p{:title => "a nice title"} %button{:disabled => true} %input{:name => 'name', :value => $user->name}
compiles to:
<p title="a nice title"></p> <button disabled="disabled"></button> <button disabled="<?php echo $disabled ?>"></button>
-
Interpolating expressions
%p{:title => "I have a #{$adjective} title"}
compiles to:
<p title="I have a <?php echo $adjective; ?> title"></p>
-
Using expressions
%p{title => {"I have a $adjective title"}} %p{title => {'I have a' . $adjective . ' title'}} %p{title => {youCanDo('anything', 'here')}}
compiles to:
<p <?php atts(array('title' => "I have a $adjective title")); ?>></p> <p <?php atts(array('title' => "I have a " . $adjective . " title")); ?>></p> <p <?php atts(array('title' => youCanDo('anything') + 'here')); ?>></p>
Note that, in the end, {
php expression
} has the same effect as "#{php expression
}", although they will be compiled to different php, they will, once evaluated, render equivalent html's.The
atts()
function is an internal Helper function
Attribute hashes can be stretched out over multiple lines to accommodate many attributes. However, newlines may only be placed immediately after commas.
%script{type => "text/javascript"',
src => "javascripts/script_#{2 + 7}"}
Compiles to:
<script type="text/javascript" src="javascripts/script_<?php echo 2 + 7; ?>" />
A function or method call that returns an array map (key => value) can be substituted for the hash contents. You can use as many such attribute methods as you want by separating them with commas. All the hashes will be merged together, from left to right.
So, if you define two functions
function hash1() {
return array('bread' => 'white', 'filling' => 'peanut butter and jelly');
}
function hash2() {
return array('bread' => 'whole wheat');
}
then
%sandwich{hash1(), hash2(), :delicious => true}/
would compile to:
<sandwich <?php atts(array(hash1(), hash2(), 'delicious' => 'delicious')); ?> />
And evaluate to:
<sandwich bread='whole wheat' filling='peanut butter and jelly' delicious='true' />
The class and id attributes can also be specified as an array whose elements will be joined together.
A class array is joined with " " and an id array is joined with "_". For example:
%div{:id => [$item->type, $item->number],
:class => [$item->type, $item->urgency]}
is equivalent to:
%div{:id => "#{$item->type}_#{$item->number}",
:class => "#{$item->type} #{$item->urgency}"}
both compile to:
<div <?php atts(array('id' => array($item->type, $item->number), 'class' => array($item->type, $item->urgency))); ?>></div>
and are evaluated to:
<div id="ItemType_4" class="ItemType immediate"></div>
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:
%a{:href => "/posts", :data => {author_id => "123"}} Posts By Author
will render as:
<a href="/posts" data-author_id="123">Posts By Author</a>