BT

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

| 作者: Jonathan Allen フォローする 547 人のフォロワー , 翻訳者 能仁 信亮 フォローする 0 人のフォロワー 投稿日 2010年10月11日. 推定読書時間: 1 分 |

原文(投稿日: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

このスレッドのメッセージについてEmailでリプライする
コミュニティコメント

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

このスレッドのメッセージについてEmailでリプライする

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

このスレッドのメッセージについてEmailでリプライする

ディスカッション

InfoQにログインし新機能を利用する


パスワードを忘れた方はこちらへ

Follow

お気に入りのトピックや著者をフォローする

業界やサイト内で一番重要な見出しを閲覧する

Like

より多いシグナル、より少ないノイズ

お気に入りのトピックと著者を選択して自分のフィードを作る

Notifications

最新情報をすぐ手に入れるようにしよう

通知設定をして、お気に入りコンテンツを見逃さないようにしよう!

BT