SmartyからJavaScriptに値を渡す

Smarty（PHP）からJavaScriptに動的に値を受け渡す場合のベストな方法とは？

JavaScriptのコードの中にそのままassign!

最も単純な方法ですね。

<script>
(function() {
    var foo = '{$foo}',
        bar = '{$bar}';
    //
    // 処理が続く...
    //
}());
</script>

簡単でいいのですが、HTMLとJavaScriptが分離できないし、そのままコードの中にassignするってのもどうなの？という問題もあります。

data属性を使ってassign!

scriptタグのdata属性を使用します。

<script src="my.js" id="myjs" data-foo="{$foo}" data-bar="{$bar}"></script>

なかなかにシンプル。このmy.jsのために使用する変数って感じでコードの見通しも良くなりそうです。使用するにはJavaScriptの中で$('#myjs').data('foo')などしてやればよいです。

ただ、受け渡す変数が多くなるとそれだけdata属性を記述してやらないといけないのでめんどくさい。あと変数名とdata属性名を統一しないといけないような義務感に苛まれます。

data属性にJSON文字列をassign!

今のところこれがベストかなぁと。

<script src="my.js" id="myjs" data-myjs-params='{$myjs-params}'></script>

jQuery.data()は正しいJSON文字列はJSONオブジェクトにパースしてくれるので扱いが便利です。PHPからJavaScriptに渡したい変数をJSON文字列として格納してやればOK。

<script src="my.js" id="myjs" data-myjs-params='{"foo":"FOO","bar":"BAR"}'></script>

var params = $('#myjs').data('myjs-params');
console.log(params.foo); // FOO
console.log(params.bar); // BAR

コンストラクタとかinitな処理のところで、this.paramsみたいに保持しておくとよさげ。

---

もっといい方法があれば教えて頂きたいです。