| 一 ， 簡單介紹 ? 它是一個基于jQuery開發的javascript模板引擎。它主要的作用如下： 1. 通過JavaScript獲取JSON形式的數據； 2. 獲取一個HTML模板，與數據相結合，生成頁面HTML。 二 ， 快速上手 先來看一個簡單的例子： <script type="text/javascript" src="jquery-1.2.6.pack.js"></script>
<script type="text/javascript" src="jquery-jtemplates.js"></script> <script type="text/javascript">
?? $(document).ready(function() {
??? //初始化數據
??? var data = {
???? name: '用戶列表',
???? list_id: '編號89757',
???? table: [
????? {id: 1, name: 'Rain', age: 22, mail: },
????? {id: 2, name: "皮特', age: 24, mail: },
????? {id: 3, name: "卡卡', age: 20, mail: },
????? {id: 4, name: "戲戲', age: 26, mail: },
????? {id: 5, name: "一揪', age: 25, mail: }
???? ]
??? };
??? // 附上模板
??? $("#result1").setTemplateElement("template");
??? // 給模板加載數據
??? $("#result1").processTemplate(data);
?? });
</script> <!-- 模板內容 -->
<textarea id="template" style="display:none">
?? <strong>{$T.name} : {$T.list_id}</strong>
?? <table>
??????? <tr>
????? <th>編號</th>
????? <th>姓名</th>
??????????????????? <th>年齡</th>
????? <th>郵箱</th>
??? </tr>
??? {#foreach $T.table as record}
??? <tr>
????? <td>{$T.record.id}</td>
????? <td>{$T.record.name}</td>
??????????????????? <td>{$T.record.age}</td>
????? <td>{$T.record.mail}</td>
??? </tr>
??? {#/for}
?? </table>
</textarea> <!-- 輸出元素 -->
<div id="result1" ></div> 上面代碼中，先導入了jQuery.js，然后導入jtemplates.js。 接下來新建了一個data數據的json對象。 var data = {
???? ......
}; 然后在HTMl頁面上增加一個 輸出元素 和 一個模板元素: 最后在JS給輸出元素 附加模板 和 數據。 這樣，運行代碼后，出現如下圖所示界面。 三 ， 加載模板 這次把模板放到一個單獨的頁面中，而不是直接寫在頁面里。 新建一個template.html，放入以下代碼： <strong>{$T.name} : {$T.list_id}</strong>
<table>
??? <tr>
??? <th>編號</th>
??? <th>姓名</th>
??????????? <th>年齡</th>
??? <th>郵箱</th>
</tr>
{#foreach $T.table as record}
<tr>
??? <td>{$T.record.id}</td>
??? <td>{$T.record.name}</td>
??????????? <td>{$T.record.age}</td>
??? <td>{$T.record.mail}</td>
</tr>
{#/for}
</table> 然后新建一個json文件，名稱為cs.json，代碼如下： {
name: "用戶列表",
list_id: "編號89757",
??? table: [
???? {id: 1, name: 'Rain', age: 22, mail: },
???? {id: 2, name: "皮特', age: 24, mail: },
???? {id: 3, name: "卡卡', age: 20, mail: },
???? {id: 4, name: "戲戲', age: 26, mail: },
???? {id: 5, name: "一揪', age: 25, mail: }
]
} 在jQuery中，可以通過$.ajax()方法來加載 json文件，代碼如下：
<script type="text/javascript">
$(function(){
$.ajax({
?? type:?????? "post",
?? dataType:?? "json",
?? url:??????? "cs.json",
success:??? function(data){
??????????????????? .....
??????????????? }
});
});
</script>
在success回調函數里，首先需要設置模板，然后需要添加數據。如下代碼所示： success:??? function(data){ ??????????????????? // 設置模板
?????????????????? $("#result1").setTemplateURL("template.html?date="+(+new Date()), null, {filter_data: true});
??????????????????? //?? 加載數據
??????????????????? $("#result1").processTemplate(data);
??????????????? }
} 完整代碼如下所示： $(function(){
$.ajax({
?? type:?????? "post",
?? dataType:?? "json",
?? url:??????? "cs.json",
success:??? function(data){
??????????????????? $("#result1").setTemplateURL("template.html?date="+(+new Date()), null, {filter_data: true});
??????????????????? $("#result1").processTemplate(data);
??????????????? }
});
}); 運行代碼后，也可以得到上圖的界面。 ? 四 ，小結 關于 new Date().getTime()的簡寫方式：可以參考這篇文章： http://www.cssrain.cn/article.asp?id=1116 CssRain提供的幾個例子，按照官方寫的： 點擊下載此文件 jtemplates官方首頁 : http://jtemplates.tpython.com/ 官方的幾個例子：
1. Simple template (see source as description)
example1.html
2. Example 1 + multiple elements + parameters
example2.html
3. Example 1 (Valid XHTML 1.1 !)
example3.html
4. Multitemplate (Valid XHTML 1.1)
example4.html | 
