BT

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ライセンスのもとで利用可能である。

この記事に星をつける

おすすめ度
スタイル

こんにちは

コメントするには InfoQアカウントの登録 または が必要です。InfoQ に登録するとさまざまなことができます。

アカウント登録をしてInfoQをお楽しみください。

HTML: a,b,br,blockquote,i,li,pre,u,ul,p

コミュニティコメント

HTML: a,b,br,blockquote,i,li,pre,u,ul,p

HTML: a,b,br,blockquote,i,li,pre,u,ul,p

BT

あなたのプロファイルは最新ですか?プロフィールを確認してアップデートしてください。

Eメールを変更すると確認のメールが配信されます。

会社名:
役職:
組織規模:
国:
都道府県:
新しいメールアドレスに確認用のメールを送信します。このポップアップ画面は自動的に閉じられます。