JavaScript Template(JST) を使って、HTML中に直接テンプレートを記述する方法
2007/02/10追記
この方法には問題がありました。
http://d.hatena.ne.jp/am11op/20070209/1171039704
JavaScript Template なる javascript のテンプレートエンジンを使ってみた。
あまりにもそのまんまなネーミングである。
ダウンロード、使い方は下記リンクに。
http://trimpath.com/project/wiki/JavaScriptTemplates
英語だけど、簡単だから僕でもわかったよ!
でも日本語にしてくれてる親切な方もいます!
http://d.hatena.ne.jp/shogo4405/20060928/1159422730
http://d.hatena.ne.jp/m-hiyama/20051201/1133396794
使い方は簡単で、
ライブラリをインクルードして、こんな感じにするだけ。
var template = "Hello ${name}!"; var data = {name: 'somebody'} var myTemplateObj = TrimPath.parseTemplate(template); var result = myTemplateObj.process(data); alert(result); //出力結果は「Hello somebody!」
で、javascript からHTML弄る時に、
- チマチマ弄るならDOM操作
- ダイナミックに弄るなら innerHTML で(ただし、HTML の組み立てはローカル変数内で行うこと)
と相場は決まってますが、
決まってるらしいですが、
決まってるとどこかで聞いた覚えがありますが、
ダイナミックに弄る場合は HTML テンプレートによる出力で
innerHTML を入れ替えるのがすっきりしてよさそうです。
コードと HTML も分離しやすいしね。
で、これを使ってこんなサンプル作ってみました。
こんなソースです。
<html> <head> <script type='text/javascript' src='../js/template.js'></script> <script type='text/javascript'> <!-- window.onload = function() { //template を取得 var conts = document.getElementById('contents'); var template = conts.innerHTML; var data = {say: 'Hello'}; var myTemplateObj = TrimPath.parseTemplate(template); var result = myTemplateObj.process(data); //template を JST による出力と差し替え conts.innerHTML = result; } //--> </script> </head> <body> <div id='contents'> ${say} World! </div> </body> </html>
ソース中に直接テンプレートを記述しちゃって、
それを getElementByID により取得、
さらに JST かませた結果を差し替えてます。
これによるメリットは
- HTML を分離できる
- javascript から出力されるものがそのままそこにあるので、わかりやすい (てことは、意欲的なデザイナさんとの共同作業が可能!)
- javascript で改行コード挟んだらエラー出るのとか気にしなくてよい
片や、デメリットは
- javascript をオフにされると、トホホなことに
- SEO って知ってる?とか意地悪言われるかも
結構強力なデメリットがありますが、
まあ SEO 気にしなくてよいようなページではやってみる価値あるかも。