BT

最新技術を追い求めるデベロッパのための情報コミュニティ

寄稿

Topics

地域を選ぶ

InfoQ ホームページ ニュース jQueryへのテンプレートの導入

jQueryへのテンプレートの導入

ブックマーク

原文(投稿日:2010/10/07)へのリンク

Microsoftによって作成された新しい3つのライブラリのうちの最初のものであり、jQueryによって公式プラグインとして受け入れられたjQuery Templates APIは、データオブジェクトからHTML要素を動的に生成してくれるライブラリだ。ASPやVBのXMLリテラルのようなサーバ・サイドのテンプレート言語と同様に、表示させたい場所にデータバインディング表現を埋め込んでおけばよいだけだ。

基本的なデータバインディングは、${fieldName}という表記方法を使って行われる。次の例を見てみよう。

  

<script id="bookTemplate" type="text/x-jquery-tmpl">
    <li><b>${Name}</b> (${Year})</li>
</script>

テンプレートを利用するには、単純に埋め込みたい場所を決め、“tmpl”メソッドでテンプレートを実行すれば良い。

  

<ul id="bookList"></ul>
$( "#bookTemplate" ).tmpl( books ).appendTo( "#bookList" );

この表記方法で、テンプレートはJavaScriptの関数にコンパイルされる。jQuery.template関数を利用して文字列からコンパイルされたテンプレートを生成することも可能だ。この方式で生成されたテンプレートには名前をつけることもでき、$.templatesリストに格納したり、単純にオブジェクトとして返したりできる。

一度しか利用しないテンプレートの場合、コンパイルのオーバーヘッドが無駄になる場合が多い。このような場合には、テンプレートを定義した文字列を直接テンプレートを実行する関数であるjQuery.templateに渡すことも可能だ。

jQuery Template APIの利用には、jQuery 1.4.2が必要だ。このライブラリは、MITおよびGPLバージョン2ライセンスのもとで利用可能である。

この記事に星をつける

おすすめ度
スタイル

BT