SmartyからJavaScriptに値を渡す

#javascript, #php, #smarty

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

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

最も単純な方法ですね。

1
2
3
4
5
6
7
8
9
<script>
(function() {
var foo = '{$foo}',
bar = '{$bar}';
//
// 処理が続く...
//
}());
</script>

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

data属性を使ってassign!

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

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

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

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

data属性にJSON文字列をassign!

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

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

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

1
<script src="my.js" id="myjs" data-myjs-params='{"foo":"FOO","bar":"BAR"}'></script>
1
2
3
var params = $('#myjs').data('myjs-params');
console.log(params.foo); // FOO
console.log(params.bar); // BAR

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


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