HTML5のdatasetをsmartyで扱う時のメモ

以下の記事を見て、HTML5のdataset超絶便利だなと思い実際に使おうとしたらsmartyで書く時に一瞬詰まったのでメモ。
最初に断っておきますが、超基本的な事です。

独自データ属性 – グローバル属性 – HTML5 タグリファレンス – HTML5.JP
意外と要注意 HTML5データ属性とjQuery Data APIの関係まとめ

何に一瞬詰まったかというと、datasetはハッシュでも書けるって所。
例えば上記の記事を参考にさせてもらうと、

<div id='hoge' data-hoge-hash='{"name":"John","job":"student"}'></div>

って書くと、jQueryでこうやって取れます。

var hoge = $('#hoge');
console.log(hoge.data('hogeHash').name); //John
console.log(hoge.data('hogeHash').job); //student

でも、テンプレートエンジンでsmartyを使っている場合エラーになります。
ピンと来る方はピンと来てると思いますが、smartyで{}はデフォルトのデリミタだからです。
ここで一瞬、はぁ？エラーになっちまうじゃねぇかよぉぉ！ファ○キング！と一瞬なってしまったのです。

じゃあどうする？

答えは簡単。こう書きます。

<div id='hoge' data-hoge-hash='{literal}{{/literal}"name":"John","job":"student"{literal}}{/literal}'></div>

そう、{literal}{/literal}で'{‘,’}’を囲めばOKです。
そらそうだ。。単純や。。しょぼいっすな。

ちなみに、smartyのテンプレート内で、{ や } の両側に空白文字があればそれをデリミタとはみなさないそうですが、そうやって書くとobjectとして認識してくれません。

<div id='hoge' data-hoge-hash=' { "name":"John","job":"student" } '></div>

って書いても、エラーにならないけど、

var hoge = $('#hoge');
console.log(hoge.data('hogeHash')); //objectじゃなくて文字列になる
console.log(hoge.data('hogeHash').name); //undefined
console.log(hoge.data('hogeHash').job); //undefined

ってなっちゃいます。

その他の回避策として、デフォルトのデリミタを変えるって方法もある様ですが

<?php
    $smarty->left_delimiter = '<!--{';
    $smarty->right_delimiter = '}-->';

こんな事の為にやるのは気が引けますよね。えぇ。

smartyで書く所で一瞬躓きましたが、兎にも角にもdatasetが超絶便利なのに変わりはないので利用出来る箇所は利用していきましょう。

あ、jQueryも一緒に使ってね！