一 ， 简单介绍

它是一个基于jQuery开发的javascript模板引擎。它主要的作用如下：

. 通过JavaScript获取JSON形式的数据；

. 获取一个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: , name: 'Rain', age: , mail: },

      {id: , name: "皮特', age: 24, mail: },

      {id: , name: "卡卡', age: 20, mail: },

      {id: , name: "戏戏', age: 26, mail: },

      {id: , name: "一揪', age: 25, 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给输出元素 附加模板 和 数据。

这样，运行代码后，出现如下图所示界面。

三 ， 加载模板

这次把模板放到一个单独的页面中，而不是直接写在页面里。

新建一个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: , name: 'Rain', age: , mail: },

     {id: , name: "皮特', age: 24, mail: },

     {id: , name: "卡卡', age: 20, mail: },

     {id: , name: "戏戏', age: 26, mail: },

     {id: , name: "一揪', age: 25, 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);

                }

});

});

运行代码后，也可以得到上图的界面。

四 ，小结

关于 new Date().getTime()的简写方式：可以参考这篇文章：

http://www.cssrain.cn/article.asp?id=1116

CssRain提供的几个例子，按照官方写的：

点击下载此文件

jtemplates官方首页 :

http://jtemplates.tpython.com/

官方的几个例子：

. Simple template (see source as description)

example1.html

. Example  + multiple elements + parameters

example2.html

. Example  (Valid XHTML 1.1 !)

example3.html

. Multitemplate (Valid XHTML 1.1)

example4.html