基于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。

二 , 快速上手

先来看一个简单的例子:

Js代码  收藏代码
  1. <script type="text/javascript" src="jquery-1.2.6.pack.js"></script>  
  2. <script type="text/javascript" src="jquery-jtemplates.js"></script>  
  3.   
  4. <script type="text/javascript">  
  5.    $(document).ready(function() {  
  6.     //初始化数据  
  7.     var data = {  
  8.      name: '用户列表',  
  9.      list_id: '编号89757',  
  10.      table: [  
  11.       {id: 1, name: 'Rain', age: 22, mail: 'cssrain@domain.com'},  
  12.       {id: 2, name: '皮特', age: 24, mail: 'cssrain@domain.com'},  
  13.       {id: 3, name: '卡卡', age: 20, mail: 'cssrain@domain.com'},  
  14.       {id: 4, name: '戏戏', age: 26, mail: 'cssrain@domain.com'},  
  15.       {id: 5, name: '一揪', age: 25, mail: 'cssrain@domain.com'}  
  16.      ]  
  17.     };  
  18.     // 附上模板  
  19.     $("#result1").setTemplateElement("template");  
  20.     // 给模板加载数据  
  21.     $("#result1").processTemplate(data);  
  22.    });   
  23. </script>  
  24.   
  25. <!-- 模板内容 -->  
  26. <textarea id="template" style="display:none">  
  27.    <strong>{$T.name} : {$T.list_id}</strong>  
  28.    <table>  
  29.         <tr>  
  30.       <th>编号</th>  
  31.       <th>姓名</th>  
  32.                     <th>年龄</th>  
  33.       <th>邮箱</th>  
  34.     </tr>  
  35.     {#foreach $T.table as record}  
  36.     <tr>  
  37.       <td>{$T.record.id}</td>  
  38.       <td>{$T.record.name}</td>  
  39.                     <td>{$T.record.age}</td>  
  40.       <td>{$T.record.mail}</td>  
  41.     </tr>  
  42.     {#/for}  
  43.    </table>  
  44. </textarea>  
  45.   
  46. <!-- 输出元素 -->  
  47. <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,放入以下代码:

Js代码  收藏代码
  1. <strong>{$T.name} : {$T.list_id}</strong>  
  2. <table>  
  3.     <tr>  
  4.     <th>编号</th>  
  5.     <th>姓名</th>  
  6.             <th>年龄</th>  
  7.     <th>邮箱</th>  
  8. </tr>  
  9. {#foreach $T.table as record}  
  10. <tr>  
  11.     <td>{$T.record.id}</td>  
  12.     <td>{$T.record.name}</td>  
  13.             <td>{$T.record.age}</td>  
  14.     <td>{$T.record.mail}</td>  
  15. </tr>  
  16. {#/for}  
  17. </table>  


然后新建一个json文件,名称为cs.json,代码如下:

Js代码  收藏代码
  1. {  
  2. name: "用户列表",  
  3. list_id: "编号89757",  
  4.     table: [  
  5.      {id: 1, name: 'Rain', age: 22, mail: 'cssrain@domain.com'},  
  6.      {id: 2, name: '皮特', age: 24, mail: 'cssrain@domain.com'},  
  7.      {id: 3, name: '卡卡', age: 20, mail: 'cssrain@domain.com'},  
  8.      {id: 4, name: '戏戏', age: 26, mail: 'cssrain@domain.com'},  
  9.      {id: 5, name: '一揪', age: 25, mail: 'cssrain@domain.com'}  
  10. ]  
  11. }  


在jQuery中,可以通过$.ajax()方法来加载 json文件,代码如下:

Js代码  收藏代码
  1. <script type="text/javascript">  
  2. $(function(){  
  3. $.ajax({  
  4.    type:       "post",  
  5.    dataType:   "json",  
  6.    url:        "cs.json",  
  7. success:    function(data){  
  8.                     .....  
  9.                 }  
  10. });  
  11. });  
  12. </script>  


在success回调函数里,首先需要设置模板,然后需要添加数据。如下代码所示:

Js代码  收藏代码
  1. success:    function(data){  
  2.   
  3.                     // 设置模板  
  4.                    $("#result1").setTemplateURL("template.html?date="+(+new Date()), null, {filter_data: true});  
  5.                     //   加载数据  
  6.                     $("#result1").processTemplate(data);  
  7.                 }  
  8. }  


完整代码如下所示:

Js代码  收藏代码
  1. $(function(){  
  2. $.ajax({  
  3.    type:       "post",  
  4.    dataType:   "json",  
  5.    url:        "cs.json",  
  6. success:    function(data){  
  7.                     $("#result1").setTemplateURL("template.html?date="+(+new Date()), null, {filter_data: true});  
  8.                     $("#result1").processTemplate(data);  
  9.                 }  
  10. });  
  11. }); 
posted @ 2012-03-21 17:27  有梦就能实现  阅读(2339)  评论(4编辑  收藏  举报