一 ， 简单介绍
它是一个基于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给输出元素 附加模板 和 数据。
这样，运行代码后，出现如下图所示界面。
?
? 三 ， 加载模板
? 这次把模板放到一个单独的页面中，而不是直接写在页面里。
新建一个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);
??????????????? }
?});
});
运行代码后，也可以得到上图的界面。
四 ，小结
关于 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