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