jTemplates——学习(1)
这里介绍一个基于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)的更多相关文章
- jTemplates模板学习笔记
1.jTemplates工作方式 1)setTemplateElement:指定可处理的模板对象 2)processTemplate:对模板化的对象进行数据处理 2.语法解析 1)jTempl ...
- 2016年学习JavaScript是怎样的一种体验(转)
转自:http://www.zcfy.cc/article/how-it-feels-to-learn-javascript-in-2016-hacker-noon-1871.html 在这篇文章的写 ...
- 从直播编程到直播教育:LiveEdu.tv开启多元化的在线学习直播时代
2015年9月,一个叫Livecoding.tv的网站在互联网上引起了编程界的注意.缘于Pingwest品玩的一位编辑在上网时无意中发现了这个网站,并写了一篇文章<一个比直播睡觉更奇怪的网站:直 ...
- Angular2学习笔记(1)
Angular2学习笔记(1) 1. 写在前面 之前基于Electron写过一个Markdown编辑器.就其功能而言,主要功能已经实现,一些小的不影响使用的功能由于时间关系还没有完成:但就代码而言,之 ...
- ABP入门系列(1)——学习Abp框架之实操演练
作为.Net工地搬砖长工一名,一直致力于挖坑(Bug)填坑(Debug),但技术却不见长进.也曾热情于新技术的学习,憧憬过成为技术大拿.从前端到后端,从bootstrap到javascript,从py ...
- 消息队列——RabbitMQ学习笔记
消息队列--RabbitMQ学习笔记 1. 写在前面 昨天简单学习了一个消息队列项目--RabbitMQ,今天趁热打铁,将学到的东西记录下来. 学习的资料主要是官网给出的6个基本的消息发送/接收模型, ...
- js学习笔记:webpack基础入门(一)
之前听说过webpack,今天想正式的接触一下,先跟着webpack的官方用户指南走: 在这里有: 如何安装webpack 如何使用webpack 如何使用loader 如何使用webpack的开发者 ...
- Unity3d学习 制作地形
这周学习了如何在unity中制作地形,就是在一个Terrain的对象上盖几座小山,在山底种几棵树,那就讲一下如何完成上述内容. 1.在新键得项目的游戏的Hierarchy目录中新键一个Terrain对 ...
- 《Django By Example》第四章 中文 翻译 (个人学习,渣翻)
书籍出处:https://www.packtpub.com/web-development/django-example 原作者:Antonio Melé (译者注:祝大家新年快乐,这次带来<D ...
随机推荐
- FastReport 动态修改连接字符串
代码如下: Report rp = new Report(); rp.Load(@"Print\aa.frx"); rp.Dictionary.Connections[0].Con ...
- 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 ...
- libthrift0.9.0解析(二)之TSimpleServer
TSimpleServer简单实现Tserver,代码如下. /** * Simple singlethreaded server for testing. * */ public class TSi ...
- Swift开发必备技巧:内存管理、weak和unowned
因为 Playground 本身会持有所有声明在其中的东西,因此本节中的示例代码需要在 Xcode 项目环境中运行.在 Playground 中可能无法得到正确的结果. 不管在什么语言里,内存管理的内 ...
- 3D跑酷游戏《月影忍者之疾风狂逃》
<月影忍者之疾风狂逃>是一款3D跑酷游戏,也是我实习的时候参与的一个项目,在那个公司我学到了很多东西,谢谢他们.大家可以去玩玩这个游戏啊,还是不错的哦.
- (转)Eclipse快捷键大全,导包快捷键:ctrl+Shift+/
Ctrl+1 快速修复(最经典的快捷键,就不用多说了)Ctrl+D: 删除当前行 Ctrl+Alt+↓ 复制当前行到下一行(复制增加)Ctrl+Alt+↑ 复制当前行到上一行(复制增加)Alt+↓ 当 ...
- Mysql中的DQL查询语句
----------------1.查询所有列 --查询 学生 表所有记录(行) select *from 学生 --带条件的查询 select *from 学生 where 年龄>19 --- ...
- python内置函数(4)
12.pow: >>> 2**10 1024 >>> pow(2,10) 1024 13.repr():忽略.. 14.reversed():反转.. 1 ...
- 复杂事件处理引擎—Esper入门(第二弹)
说明: 以下内容,可以参考Esper官方网站<Qucik start & Tutorial >(顺序做了部分调整). PS:因为英语水平有限(大学期间刚过CET4的英语小盲童一枚) ...
- web UI
Semantic不错的UI,代码非常详细