JavaScript Template(JST) を使って、HTML中に直接テンプレートを記述する方法

javascript JST template

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 も分離しやすいしね。


で、これを使ってこんなサンプル作ってみました。

JSTを使って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 気にしなくてよいようなページではやってみる価値あるかも。