jQuery Templatesを使用すると、開発者は、データをバインドするために機械的にテキストボックス、テキストボックスを必要とするのではなく、htmlにjavascriptオブジェクトをバインドすることが容易になります。jQuery Templatesは、あなたが望むhtmlの結果を得ることができるように、単純な構文をサポートしています：
まず、以下のようにjQueryファイルとjQuery.tmplファイルを参照する必要があります：
<script type="text/javascript" src="http://..com/ajax/libs/jquery/..4/..js"></script>
<script src="jquery.tmpl.js" type="text/javascript"></script>
jQuery Templatesを使用するには、<script type="text/html">タグで表示するコンテンツに埋め込む必要があります：
<div id="userinfo"></div>
<script id="usertemplate" type="text/html">
<div class="userinfo">
UserName:{{= name}}
Website:{{= website}}
</div>
</script>
使用テンプレートは、javascriptオブジェクトまたはjavascriptオブジェクトの配列を表示することができ、以下はjavascriptオブジェクトの配列とjQueryメソッドを表示するために使用されます：
var users = [
{ name: "あなたの人々", website: "http://..com" },
{ name: "jQuery , website: "http://..com" }
];
$(document).ready(function () {
$("#usertemplate")
.render(users)
.appendTo("#userinfo");
});
render() メソッドはデータを文字列に変換し、*** userinfo 要素にデータを追加します：
前述したように、jQueryテンプレートでは簡単な構文を使用することができるので、必要に応じてデータを表示することができます。例えばこの場合、誰かが複数のウェブサイトを持っているとすると、以下の簡単なifと各メソッドを見てみましょう：
var users = [
{ name: "あなたの人々", websites: ["jquery001.com", "google.com"] },
{ name: "jQuery , websites: ["jquery001.com"] },
{ name: "jQuery", websites: [] }
];
以下は、各メソッドは、あまりにも多くのことを言うことはありませんが、ユーザーが1回または2回を使用する場合は、その構文を覚えてテンプレートの使用を示しています：
<div id="userinfo"></div>
<script id="usertemplate" type="text/html">
<div class="userinfo">
UserName:{{= name}}
{{if websites.length}}
Websites:
<ul>
{{each(i,website) websites}}
<li>{{= website}}</li>
{{/each}}
</ul>
{{/if}}
</div>
</script>
下のイメージは***の結果です。もちろん、これはjQuery Templatesの基本的な使い方のごく簡単な紹介にすぎませんが、読者のお役に立てれば幸いです。
