Edited at

HTML5のdata属性の名前をRailsのViewで付ける時と、jQueryからアクセスする時の注意

More than 3 years have passed since last update.

HTML5のdata-* 属性名は XML-compatibleかつ先頭3文字が「xml」でない文字で書かないといけません。


XML-compatibleとは

先頭が英文字または、「_(アンダースコア)」 で始まり2文字目移行が「-(ハイフン)」「.(ピリオド)」 を含む英数字。

( 「.(ピリオド)」 は使わないほうがよいらしい)

http://tokkono.cute.coocan.jp/blog/slow/index.php/xhtmlcss/html5-data-attributes-vs-jquery-data-api/


RailsのViewで書く時の注意

Viewで要素のデータ属性を下のように書くときがある。

RubyのSymbolでは「-(ハイフン)」を使えないので以下の様には書けない。


間違い

= link_to 'リンク', '/', data: {hoge-hoge: 'hogehoge'}, class: 'hoge'


以下の様に書かないと文法エラーとなる。


正解

= link_to 'リンク', '/', data: {hoge_hoge: 'hogehoge'}, class: 'hoge'


これはHTMLに変換されたとき、以下の様に「-(ハイフン)」に変わっている。

<a data-hoge-hoge="hogehoge" class="hoge" href="/">リンク</a>

なので、jQueryからdataメソッドでアクセスするときは、以下のようにする。

$('a.hoge').data('hoge-hoge');