基於jQuery開發的javascript模板引擎-jTemplates

這里介紹一個基於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: '[e-mail]'},
      {id: 2, name: '皮特', age: 24, mail: '[e-mail]'},
      {id: 3, name: '卡卡', age: 20, mail: '[e-mail]'},
      {id: 4, name: '戲戲', age: 26, mail: '[e-mail]'},
      {id: 5, name: '一揪', age: 25, mail: '[e-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給輸出元素 附加模板 和 數據。

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

用戶列表 : 編號89757
編號   姓名  年齡  郵箱
1        Rain   22    [e-mail]
2        皮特   24   [e-mail]
3       卡卡   20    [e-mail]
4       戲戲   26    [e-mail]
5       一揪   25    [e-mail]



三 ， 加載模板

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

新建一個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: '[e-mail]'},
     {id: 2, name: '皮特', age: 24, mail: '[e-mail]'},
     {id: 3, name: '卡卡', age: 20, mail: '[e-mail]'},
     {id: 4, name: '戲戲', age: 26, mail: '[e-mail]'},
     {id: 5, name: '一揪', age: 25, mail: '[e-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);
                }
});
});