基于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: '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); }}
完整代码如下所示：
$(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); }});});
页:
[1]