jQuery插件---jTemplates(模板)

最新推荐文章于 2024-03-10 13:50:42 发布

lzm198707

最新推荐文章于 2024-03-10 13:50:42 发布

阅读量663

点赞数

分类专栏： jQuery 文章标签： jquery插件 html 模板引擎

jQuery 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

一，简单介绍

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

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

2. 获取一个HTML模板，与数据相结合，生成页面HTML。

二，快速上手

先来看一个简单的例子：

<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文件，代码如下：

在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

本人声明：个人主页：沐海（http://www.cnblogs.com/mahaisong）以上文章都是经过本人设计实践和阅读其他文档得出。如果需要探讨或指教可以留言或加我QQ！欢迎交流！