テンプレートエンジン(SmartyやERBのような)を使ってHTMLを出力している案件で、JavaScript側にテンプレートエンジンが出力するデータを渡したい場合、どういった方法がスタンダードなんでしょうか？
自分で思いつくのは直接scriptタグ内で変数宣言(*1)する場合と、HTMLのmicrodata等の属性として持たせておく(*2) 2パターンかなと思ったのですが、皆さんの意見を聞いてみたいです。
(*1)
<script>
var id = ’テンプレートエンジンの出力タグ’;
var uid = ’テンプレートエンジンの出力タグ’;
</script>
(*2) <body data-id="テンプレートエンジンの出力タグ’ data-uid="テンプレートエンジンの出力タグ">
例1の場合、宣言した変数を使用するJSの読み込み場所によって、onloadイベントを待つ必要がでてくるのと、グローバル空間なのがイマイチな気がしています。
例2の場合、DOMContentLoadedのタイミングで取得できるので、こっちでいいかなとも思うのですが、その場合bodyタグでいいのかなという所です。変数用の<div id="js-vars"></div>みたいな要素を作るのもありなのかなとも。
上記2パターンに対しての意見と、他にもこういう方法があるというのがあれば教えて頂きたいです。
よろしくお願いします。
みんなの回答 2 件
あまり考えずに1の方法をしていました。
別の方法としては、js自体をSmarty化する方法がありますね。
PHPでHTMLを作ると修正とかスマホ対応が面倒なので、JSONを返してJavaScript側でUnderscoreとかのテンプレートライブラリを利用して出力する。
関連するトピックス