jTemplates——學習（1）

這裏介紹一個基於jQuery開發的模板引擎。 
jTemplates目前最新的版本是0.7.8，由tPython開發。官方網站：http://jtemplates.tpython.com 

兩個附件，

一個是jTemplates官方網站提供的下載包，其中包括jTemplates的說明、jTemplates JS庫、jTemplates DOC。 

另外一個是使用jTemplates作的三個DEMO。 

一 ， 簡單介紹 

它是一個基於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: 'cssrain@domain.com'},  

      {id: 2, name: '皮特', age: 24, mail: 'cssrain@domain.com'},  

      {id: 3, name: '卡卡', age: 20, mail: 'cssrain@domain.com'},  

      {id: 4, name: '戲戲', age: 26, mail: 'cssrain@domain.com'},  

      {id: 5, name: '一揪', age: 25, mail: 'cssrain@domain.com'}  

     ]  

    };  

    // 附上模板  

    $("#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給輸出元素 附加模板 和 數據。 

這樣，運行代碼後，出現以下圖所示界面。 

用戶列表 : 編號89757 
編號   姓名  年齡  郵箱 
1        Rain   22    cssrain@domain.com 
2        皮特   24   cssrain@domain.com 
3       卡卡   20    cssrain@domain.com 
4       戲戲   26    cssrain@domain.com 
5       一揪   25    cssrain@domain.com 


三 ， 加載模板 

此次把模板放到一個單獨的頁面中，而不是直接寫在頁面裏。 

新建一個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: 'cssrain@domain.com'},  

     {id: 2, name: '皮特', age: 24, mail: 'cssrain@domain.com'},  

     {id: 3, name: '卡卡', age: 20, mail: 'cssrain@domain.com'},  

     {id: 4, name: '戲戲', age: 26, mail: 'cssrain@domain.com'},  

     {id: 5, name: '一揪', age: 25, mail: 'cssrain@domain.com'}  

]  

}  

 

在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);  

 }  

}