Hamlで属性を書く時にHashのキーをシンボルにする場合、
-(ハイフン)が使えないという欠点がある。
%span{data-hogehoge: 'mokemoke'}
%span{:data-hogehoge => ‘mokemoke'}
とかは、エラーになる。
%span{"data-hogehoge": 'mokemoke'}
%span{:"data-hogehoge" => 'mokemoke'}
これでも構わないが、もっと綺麗に書くなら
ハッシュを階層化することも可能で
Haml側では自動的に「-」区切りしてくれるようになっている。
%span{ data: { hogehoge: 'mokemoke' } }
%span{ :data => { :hogehoge => 'mokemoke' } }
のように指定することができます。
ちなみにこれは、dataだけが特別なのではなく、
属性として指定するHashの階層は、ハイフンで繋げられる。
%span{ fuga: {hoge: { piyo: 'mokemoke' } } }
この場合、fuga-hoge-piyo = 'mokemoke'という属性が指定される。
特に、カスタムデータを複数指定したい場合が以下のように記述できるため、
よりスマートに記述することが可能。
%span{"data-hoge": 'data1' , "data-fuga": 'data2' , "data-piyo": 'data3'}
上記が、
%span{ data: { hoge: 'data1', fuga: 'data2', piyo: 'data3'} }
こんな風に記述できて、どちらも以下のような変換結果になる。
<span data-fuga="data2" data-hoge="data1" data-piyo="data3"></span>