jQuery公式のテンプレートplugin 「jQuery Templates」-JavaScript Library Archive

jQuery公式のテンプレートplugin 「jQuery Templates」

配布元:jquery’s jquery-tmpl at master – GitHub
リファレンス:jQuery Templates

jQueryプロジェクトからいくつかの公式プラグインが公開されました。そのひとつが「jQuery Templates」。これはJavaScriptで利用できるテンプレートエンジンです。

利用方法

本エントリー執筆時点ではGitHubからダウンロードして利用できますが、~~jQuery 1.5からはjQuery本体に組み込まれ、プラグインなしで利用することが出来ます。~~(本体への組み込みは延期されました)また、MicrosoftのCDNでも公開されていますので次のような記述で読み込むことも可能です。

<script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery/jquery-1.4.2.js"></script>
<script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery.templates/beta1/jquery.tmpl.js"></script>

基本的な利用方法

基本的にテンプレート部分とデータ部分を作成して、これらを関連付けることでテンプレートにデータが挿入された状態を作成します。

データ部分はXMLやJSON、JavaScriptのオブジェクトなどを利用して作成します。

var movies = [
	{ Name: "The Red Violin", ReleaseYear: "1998" },
	{ Name: "Eyes Wide Shut", ReleaseYear: "1999" },
	{ Name: "The Inheritance", ReleaseYear: "1976" }
];

この場合「Name」と「ReleaseYear」というプロパティを持つオブジェクトをmoviesという配列に保存しています。

テンプレート部分は雛形として、通常のHTML中に${….}としてデータをセットする箇所を設定します。

var markup = "<li><b>${Name}</b> (${ReleaseYear})</li>";

templateメソッドを利用し、先ほど作成した雛形「markup」をテンプレート化します。第１引数にテンプレート名が設定できます。

$.template( "movieTemplate", markup );

tmplメソッドを利用してテンプレートとデータを関連付けます。これでHTMLが関連付けられますのでappendToメソッドを利用してHTML文章中に挿入しましょう。

$.tmpl( "movieTemplate", movies ).appendTo( "#movieList");

これがjQuery Templatesの基本的な利用方法です。

サンプル

テンプレート部分の分離

次のようにするとテンプレート部分をJavaScriptコードから分離することも出来ます。script要素のtype属性に「text/x-jquery-tmpl」をセットすることで、その内側にテンプレートを記述することが出来ます。

<ul id="movieList">
<script id="movieTemplate" type="text/x-jquery-tmpl"> 
	<li><b>${Name}</b> (${ReleaseYear})</li>
</script>
</ul>

上記は直感的ですがul要素がscript要素を内包してしまいますので次のように書いたほうが良いでしょう。

<ul id="movieList"></ul>
<script id="movieTemplate" type="text/x-jquery-tmpl"> 
	<li><b>${Name}</b> (${ReleaseYear})</li>
</script>

JavaScriptではテンプレートとデータを関連付けるだけでよいので非常にシンプルなコードになります。

var movies = [
	{ Name: "The Red Violin", ReleaseYear: "1998" },
	{ Name: "Eyes Wide Shut", ReleaseYear: "1999" },
	{ Name: "The Inheritance", ReleaseYear: "1976" }
];
$( "#movieTemplate").tmpl(movies).appendTo( "#movieList" )

サンプル