data- 属性とjQuery.data

JUMLY.scanの実装でdata-*属性jQuery.dataを使ってちょっとハマったので書き残す。

動作検証用に書いたものをGistに貼ったのでどうぞ。

data-*名と.data()のキー名の関係

• data-fooは、.data("foo")で取得
• data-foo_barは、.data("foo_bar")で取得
• data-foo-barは、.data("fooBar")で取得
• data-foo-0は、.dataでは取得できない。foo-0がキー名として認識されないようだ

foo-barのキーはcamel styleになるのは誰得な感があるので、 ハイフンでつなぐスタイルは好みなんだけど個人的には使わないことにする。

data-*にはvalidなJSONが必要

「data-*にはJSON書けたよなあ」とうろ覚えで、最初次のように書いてた。

<div id='foo' data-foo="{like:'apple'}">...

実はぜんぜんダメで、次のようにvalidなJSONで書く必要があった。

<div id='foo' data-foo='{"like":"apple"}'>...

これで次のように参照できる。

$(foo).data("foo").like

ちなみに、validなJSONじゃないときは、ただの文字列として認識される。

typeof $(foo).data("foo")
"string"

data-*は初期値用（かな？）

data-*はjQueryオブジェクトが構築される際に一度評価されて、 対応する.dataのスロットに入るようだ。コードちゃんと読んだわけじゃないけど。

<div id='foo' data-foo='{"like":"apple"}'>...

$(foo).data("foo").like = 'orange';

として書き換えてもdata-fooの値には影響はない。 まあ、そりゃそうだよね。そんなコスト高いことやってもメリット特にないし。