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

2007年1月21日 19:38 pm11op | | コメント(0) | トラックバック(0)



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'>



</script>

</head>

<body>



<div id='contents'>



${say} World!



</div>



</body>

</html>


ソース中に直接テンプレートを記述しちゃって、


それを getElementByID により取得、


さらに JST かませた結果を差し替えてます。



これによるメリットは



  • HTML を分離できる

  • javascript から出力されるものがそのままそこにあるので、わかりやすい (てことは、意欲的なデザイナさんとの共同作業が可能！)

  • javascript で改行コード挟んだらエラー出るのとか気にしなくてよい


片や、デメリットは



  • javascript をオフにされると、トホホなことに

  • SEO って知ってる？とか意地悪言われるかも



結構強力なデメリットがありますが、


まあ SEO 気にしなくてよいようなページではやってみる価値あるかも。


カテゴリ:

トラックバック(0)

このブログ記事を参照しているブログ一覧: JavaScript Template(JST) を使って、HTML中に直接テンプレートを記述する方法

このブログ記事に対するトラックバックURL: http://pm.11op.net/mt/mt-tb.cgi/12

コメントする