jquery.tmpl是jQuery模板插件,http://plugins.jquery.com/tmpl/ （另外還有一個插件dot.js，不依賴與jquery,性能更佳，使用方法大同小異）
在網頁中大量使用異步請求數據來更新頁面內容非常常見，異步請求返回的內容一般是表現為json格式的數據，因為HTML結構的復雜性，我們在沒有使用任何工具下要將json表現格式的數據生成HTML是非常繁瑣的，而且容易出錯，不好維護。因此通過jquery.tmpl和定義HTML模板可以輕松很多，更利於維護。
Tmpl提供了幾種tag：
1, ${}：等同於{{=}}，是輸出變量，通過了html編碼的。
2, {{html}}:輸出變量html,但是沒有html編碼，適合輸出html代碼。
3, {{if }} {{else}}:提供了分支邏輯。
4, {{each}}:提供循環邏輯，$value訪問迭代變量。
基本使用
1，首先我們需要引用jquery.js和jquery.tmpl.js
2，定義一個模板
3，調用tmpl()方法：$("模板ID").tmpl(data);
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title> new document </title>
</head>
<style type="text/css">
#list li {
padding: 8px 0;
line-height: 1.8em;
list-style-type: decimal;
}
</style>
<body>
<ul id="list"></ul>
</body>
</html>
<script type="text/javascript" src='jquery.js'></script>
<script type="text/javascript" src='jquery.tmpl.js'></script>
<!--定義一個User模板-->
<script type="text/template" id='UserTmpl'>
<li>
<span>${NickName}</span>
<span>${Age}</span>
<span>${Gender}<span>
</li>
</script>
<script type="text/javascript">
var users=[{ID:"0001",NickName:"小白",Gender:false,Age:18},{ID:"0001",NickName:"小黑",Gender:true,Age:20}];
$("#list").append($("#UserTmpl").tmpl(users));
</script>
{{if }} {{else}}的使用
明顯對於性別Gender屬性需要使用到{{if}}和{{else}}了
修改一下模板 {{if}}后面加的就是符合if里面條件后要輸出的HTML, 使用{{if}}需要有結束標記{{/if}}
<li>
<span>${NickName}</span>
<span>${Age}</span>
{{if Gender}}
<span>男</span>
{{else}}
<span>女</span>
{{/if}}
</li>
{{each}}使用
<script id="each" type="text/x-jquery-tmpl">
<li>
<span>${Title}</span>
<span>Languages:</span>
<ul>
{{each Languages}}
<li>${$value.Name}</li>
{{/each}}
<ul>
</li>
</script>
<script type="text/javascript">
var movies = [{Title: "Meet Joe Black", Languages: [{ Name: "English" },{ Name: "French" }]}];
$("#each").tmpl(movies).appendTo('#div_each');
</script>