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

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

XML-compatibleとは

先頭が英文字または、「_(アンダースコア)」 で始まり2文字目移行が「-(ハイフン)」「.(ピリオド)」 を含む英数字。
（ 「.(ピリオド)」 は使わないほうがよいらしい）

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');