jQuery Templates テンプレートエンジン の使い方

サーバ側でhtmlまで生成していたのですが、JSONデータのみにして軽量化したいのですが、
クライアント側でDOM組み立てる処理を書くのはちょっとやってられないので、テンプレートエンジンを探していました。


JSテンプレートエンジンについてググってみたところ、さまざまなものがあるようですが、
jQueryでもプラグインがあるようなので、手始めにこれでやってみました。

本家:jQuery - Templates
参考:jQuery公式のテンプレートplugin 「jQuery Templates」

  • テンプレート(html側)
<ul id="movieList"></ul>
<script id="movieTemplate" type="text/x-jquery-tmpl">
	<li><b>${Name}</b> (${ReleaseYear})</li>
</script>
  • js
var movies = [
	{ Name: "The Red Violin", ReleaseYear: "1998" },
	{ Name: "Eyes Wide Shut", ReleaseYear: "1999" },
	{ Name: "The Inheritance", ReleaseYear: "1976" }
];
//テンプレートから生成したDOMを対象にappendします
$( "#movieTemplate").tmpl(movies).appendTo( "#movieList" )


おー、見たまんま動きます。
${}がJSONのプロパティと置き換わります。

{hoge:"ほげ"}
<span>${hoge}<span><span>ほげ<span>

それを配列分繰り返します。



もう他のを試さなくても、これで十分すぎました。