投稿日: 
スポンサーリンク
以下の記事を見て、HTML5のdataset超絶便利だなと思い実際に使おうとしたらsmartyで書く時に一瞬詰まったのでメモ。
最初に断っておきますが、超基本的な事です。
何に一瞬詰まったかというと、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も一緒に使ってね！
