这里介绍一个基于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);  

 }  

}  

jTemplates——学习(1)的更多相关文章

  1. jTemplates模板学习笔记

    1.jTemplates工作方式   1)setTemplateElement:指定可处理的模板对象 2)processTemplate:对模板化的对象进行数据处理 2.语法解析   1)jTempl ...

  2. 2016年学习JavaScript是怎样的一种体验(转)

    转自:http://www.zcfy.cc/article/how-it-feels-to-learn-javascript-in-2016-hacker-noon-1871.html 在这篇文章的写 ...

  3. 从直播编程到直播教育:LiveEdu.tv开启多元化的在线学习直播时代

    2015年9月,一个叫Livecoding.tv的网站在互联网上引起了编程界的注意.缘于Pingwest品玩的一位编辑在上网时无意中发现了这个网站,并写了一篇文章<一个比直播睡觉更奇怪的网站:直 ...

  4. Angular2学习笔记(1)

    Angular2学习笔记(1) 1. 写在前面 之前基于Electron写过一个Markdown编辑器.就其功能而言,主要功能已经实现,一些小的不影响使用的功能由于时间关系还没有完成:但就代码而言,之 ...

  5. ABP入门系列(1)——学习Abp框架之实操演练

    作为.Net工地搬砖长工一名,一直致力于挖坑(Bug)填坑(Debug),但技术却不见长进.也曾热情于新技术的学习,憧憬过成为技术大拿.从前端到后端,从bootstrap到javascript,从py ...

  6. 消息队列——RabbitMQ学习笔记

    消息队列--RabbitMQ学习笔记 1. 写在前面 昨天简单学习了一个消息队列项目--RabbitMQ,今天趁热打铁,将学到的东西记录下来. 学习的资料主要是官网给出的6个基本的消息发送/接收模型, ...

  7. js学习笔记:webpack基础入门(一)

    之前听说过webpack,今天想正式的接触一下,先跟着webpack的官方用户指南走: 在这里有: 如何安装webpack 如何使用webpack 如何使用loader 如何使用webpack的开发者 ...

  8. Unity3d学习 制作地形

    这周学习了如何在unity中制作地形,就是在一个Terrain的对象上盖几座小山,在山底种几棵树,那就讲一下如何完成上述内容. 1.在新键得项目的游戏的Hierarchy目录中新键一个Terrain对 ...

  9. 《Django By Example》第四章 中文 翻译 (个人学习,渣翻)

    书籍出处:https://www.packtpub.com/web-development/django-example 原作者:Antonio Melé (译者注:祝大家新年快乐,这次带来<D ...

随机推荐

  1. FastReport 动态修改连接字符串

    代码如下: Report rp = new Report(); rp.Load(@"Print\aa.frx"); rp.Dictionary.Connections[0].Con ...

  2. RMAN-06496: must use the TO clause when the database is mounted or open

    一:问题描述 备份控制文件时报错: RMAN> restore controlfile from '/home/oracle/backup/PROD_32_20140829.bak'; Star ...

  3. libthrift0.9.0解析(二)之TSimpleServer

    TSimpleServer简单实现Tserver,代码如下. /** * Simple singlethreaded server for testing. * */ public class TSi ...

  4. Swift开发必备技巧:内存管理、weak和unowned

    因为 Playground 本身会持有所有声明在其中的东西,因此本节中的示例代码需要在 Xcode 项目环境中运行.在 Playground 中可能无法得到正确的结果. 不管在什么语言里,内存管理的内 ...

  5. 3D跑酷游戏《月影忍者之疾风狂逃》

    <月影忍者之疾风狂逃>是一款3D跑酷游戏,也是我实习的时候参与的一个项目,在那个公司我学到了很多东西,谢谢他们.大家可以去玩玩这个游戏啊,还是不错的哦.

  6. (转)Eclipse快捷键大全,导包快捷键:ctrl+Shift+/

    Ctrl+1 快速修复(最经典的快捷键,就不用多说了)Ctrl+D: 删除当前行 Ctrl+Alt+↓ 复制当前行到下一行(复制增加)Ctrl+Alt+↑ 复制当前行到上一行(复制增加)Alt+↓ 当 ...

  7. Mysql中的DQL查询语句

    ----------------1.查询所有列 --查询 学生 表所有记录(行) select *from 学生 --带条件的查询 select *from 学生 where 年龄>19 --- ...

  8. python内置函数(4)

    12.pow:      >>> 2**10 1024 >>> pow(2,10) 1024 13.repr():忽略.. 14.reversed():反转.. 1 ...

  9. 复杂事件处理引擎—Esper入门(第二弹)

    说明: 以下内容,可以参考Esper官方网站<Qucik start & Tutorial >(顺序做了部分调整). PS:因为英语水平有限(大学期间刚过CET4的英语小盲童一枚) ...

  10. web UI

    Semantic不错的UI,代码非常详细