基于jQuery开发的javascript模板引擎-jTemplates
这里介绍一个基于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);
- }
- }
完整代码如下所示:
- $(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);
- }
- });
- });
转载于:https://www.cnblogs.com/firstdream/archive/2012/03/21/2410264.html
基于jQuery开发的javascript模板引擎-jTemplates相关推荐
- 【JavsScript】推荐五款流行的JavaScript模板引擎
摘要:Javascript模板引擎作为数据与界面分离工作中最重要一环,受到开发者广泛关注.本文通过开发实例解析五款流行模板引擎:Mustache.Underscore Templates.Embedd ...
- 高性能JavaScript模板引擎原理解析
来源:http://cdc.tencent.com/?p=5723 随着 web 发展,前端应用变得越来越复杂,基于后端的 javascript(Node.js) 也开始崭露头角,此时 javascr ...
- 13 款 JavaScript 模板引擎
JavaScript 在生成各种页面内容时如果能结合一些模板技术,可以让逻辑和数据之间更加清晰,本文介绍 X 款 JavaScript 的模板引擎.(排名不分先后顺序) 1. Mustache 基于j ...
- if laytpl 非_laytpl : 一款非常轻量的JavaScript模板引擎
//假设你得到了这么一段数据 var data = { title: '前端圈', intro: '一群码js的骚年,幻想改变世界,却被世界改变.', list: [{name: '贤心', city ...
- JavaScript模板引擎详解
JavaScript模板引擎是一种用于生成HTML.XML和其他文本格式的工具,它将特定的模板语法转换为相应的文本输出,通常用于前端开发中动态生成页面内容.下面是一个JavaScript模板引擎的详细 ...
- 前端模板引擎artTemplate---高性能JavaScript模板引擎
关于artTemplate模板引擎的详细原理请移步高性能JavaScript模板引擎原理解析,本文只探讨如何使用.初学前端的人一般对于绑定数据都是使用原生js或者jquery来拼接字符串,此为hard ...
- JavaScript模板引擎Template.js基本使用详解
template.js是一款JavaScript模板引擎,提供一套模板语法,简单好用,开发者可以写一个模板区块,每次传入的数据,生成对应数据产生的HTML片段,渲染不同的效果.官网:简洁语法版 htt ...
- 前端javaScript模板引擎之ArtTemplate
一.简介 ArtTemplate是腾讯开发的一款使用方便.性能卓越javascript模板引擎,其渲染效率极其快.ArtTemplate的库分为两种,一个是template.js,这个是简单的语法版本 ...
- Javascript模板引擎mustache.js详解
进阶之路在于日积月累, 每天进步一点点-加油~ mustache.js是一个简单强大的Javascript模板引擎,使用它可以简化在js代码中的html编写,压缩后只有9KB,非常值得在项目中使用. ...
最新文章
- python中setup什么意思_Python unittest中setUp()和setUpClass()有什么区别?
- 第三话 开关说它不认识“2”
- 065_const关键字
- 深入理解分布式技术 - 分布式缓存总结回顾
- 【C语言】x++与++x
- 还有什么不能做?——细谈在C#中读写Excel系列文章之一
- 受宠的背后:安全市场面临重新洗牌
- CAD/DWG图纸在线浏览/查看/预览/解析插件/SDK
- 安卓音量设置流程之MasterVolume
- 隐函数存在定理隐函数的高阶导数
- SPADE(GauGAN)代码运行方法
- python数据对比校验_Python对比数据库两张表是否一致
- java如何快速标记条_【JAVA】如何利用TODO任务标签高效管理代办代码
- 十几年稳坐“大哥”位,搞Java的程序员就是这么“牛x”!
- eclipse的安装与下载
- flink-cdc 同步mysql数据到ES时间格式问题。
- spring利用Druid实现sql监控界面
- jieba分词库、WordCloud词云库、requests库
- 华擎主板的instant flash功能问题
- 详解:熊掌号每一篇闪光的原创,都值得保护!
热门文章
- 三周一套报表开发系统,原来Excel的顶级替代品是它
- 年终将至,手把手教你做一份亮眼的年终总结报告
- 大数据分析工具鄙视链:Python成老大,Excel小弟都称不上?
- 酷炫可视化+强于excel的结合体!超高效的表格工具,不用可惜
- 你可以不懂数据分析,但请一定收藏这个神器!
- 样式中指定调用的效果
- testflight测试软件怎么,TestFlight使用步骤
- ctf题目:看不见的flag_记一次江西省信息安全线下CTF比赛
- halcon边缘提取颜色相近_初学者福利!三种用Python从图像数据中提取特征的技术...
- python下载包没用_Python下载各种功能包出问题