jquery jtemplates.js模板渲染引擎的详细用法第一篇
来源:互联网 发布:网络成瘾对儿童影响 编辑:程序博客网 时间:2024/06/05 12:41
jquery jtemplates.js模板渲染引擎的详细用法第一篇
Author:ching
Date:2016-06-29
jTemplates是一个基于JQuery的模板引擎插件,功能强大,有了他你就再不用为使用JS绑定数据时发愁了。后端语言使用php,asp.net,jsp等都不是问题,使用模板渲染可以很大程度上提高程序性能,使用异步获取数据,不用整个页面都回发,好处当然不仅仅是这些。
下载jtemplates,官网的文档写得非常的详细
打开官网:http://jtemplates.tpython.com/
左侧找到Download,然后直接点击要下载的文件即可,当前最新版本是0.8.4
jTemplates配合jQuery的on或者delegate事件处理方法可以让你迷恋无法自拔。哈哈...
下面是详细用法总结:
jtemplates模板的简单使用,首先使用jtemplates就要使用json数据,在这里我们不妨构造一个json格式的数据,如下:
{"name" : "网马伦","list_id" : 89757,"table":[{"id": 1, "name": "Rain", "age": 22, "mail": "admin@domain.com"},{"id": 2, "name": "皮特", "age": 24, "mail": "123456@domain.com"},{"id": 3, "name": "卡卡", "age": 20, "mail": "112233@domain.com"},{"id": 4, "name": "戏戏", "age": 26, "mail": "0147@domain.com"},{"id": 5, "name": "一揪", "age": 25, "mail": "kkw@domain.com"}]}
接下来新建一个页面jtemplates_demo1.html
然后引入jquery,我这里使用的是jquery-2.1.1.min.js,你可以在这里下载http://www.jquery.com/
引入js文件代码如下:
<script type="text/javascript" src="./js/jquery-2.1.1.min.js"></script><script type="text/javascript" src="./js/jquery-jtemplates.min.js"></script>
接下来构造模板样式
代码如下:
<textarea id="template" class="template"><div><strong>部门编号:{$T.list_id}</strong></div><div><strong>负责人:{$T.name} </strong></div><div><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></div></textarea>
这个是我要最终显示的效果,也就是模板,然后模板定义好了,然后我们在定义一个最后用来承载显示数据的标签,一般用div或者其他标签均可,我这里使用div如下:
<div id="result"></div>
此时我们的显示数据的前台HTML标签就写好了,模板和result这两个的顺序没有要求,但是为了阅读方便这里使用如下顺序放置:
<div id="result"></div><textarea id="template" class="template"><div><strong>部门编号:{$T.list_id}</strong></div><div><strong>负责人:{$T.name} </strong></div><div><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></div></textarea>
接下来就要在js中设置模板和处理数据啦,直接上代码,然后在解释代码的意思,代码如下:
<script type="text/javascript">$(function(){// 初始化JSON数据var data = {"name" : "网马伦","list_id" : 89757,"table":[{"id": 1, "name": "Rain", "age": 22, "mail": "admin@domain.com"},{"id": 2, "name": "皮特", "age": 24, "mail": "123456@domain.com"},{"id": 3, "name": "卡卡", "age": 20, "mail": "112233@domain.com"},{"id": 4, "name": "戏戏", "age": 26, "mail": "0147@domain.com"},{"id": 5, "name": "一揪", "age": 25, "mail": "kkw@domain.com"}]};// 设置模板$("#result").setTemplateElement("template");// 给模板加载数据$("#result").processTemplate(data);});</script>
首先我们在前面直接引用了jQuery,在这里直接写在$(function(){});里面就可以了,
$("#result").setTemplateElement("template");这一步非常关键,解释如下:
这一步的意思就是讲id="result"的div设置模板为id="template",然后就是处理数据,这里的data就是json数据,这样就可以直接显示json数据了,这就是模板渲染,简单吧,下面是全部代码如下:
<!doctype html><html lang="zh-CN"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>jQuery - jTemplates</title><link rel="stylesheet" type="text/css" href="./css/style.css"><script type="text/javascript" src="./js/jquery-2.1.1.min.js"></script><script type="text/javascript" src="./js/jquery-jtemplates.min.js"></script><style type="text/css">.container{width: 1000px;height: 600px;margin: 0 auto;}.template{display: none;}table{background-color: #fff;}table tr th{padding: 8px;border-bottom: 1px solid #eee;}table tr td{padding: 10px;border-bottom: 1px solid #eee;}</style><script type="text/javascript">$(function(){// 初始化JSON数据var data = {"name" : "网马伦","list_id" : 89757,"table":[{"id": 1, "name": "Rain", "age": 22, "mail": "admin@domain.com"},{"id": 2, "name": "皮特", "age": 24, "mail": "123456@domain.com"},{"id": 3, "name": "卡卡", "age": 20, "mail": "112233@domain.com"},{"id": 4, "name": "戏戏", "age": 26, "mail": "0147@domain.com"},{"id": 5, "name": "一揪", "age": 25, "mail": "kkw@domain.com"}]};// 设置模板$("#result").setTemplateElement("template");// 给模板加载数据$("#result").processTemplate(data);});</script></head><body><div class="container"><div><h1>标题</h1></div><div id="result"></div><textarea id="template" class="template"><div><strong>部门编号:{$T.list_id}</strong></div><div><strong>负责人:{$T.name} </strong></div><div><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></div></textarea><!-- <textarea id="templateContainer" style="display: none;"> <table> <tr> <td>Id</td> <td>标题</td> <td>发布时间</td> </tr> {#foreach $T.Lists as row} <tr> <td>{$T.row.Id}</td> <td>{$T.row.Title}</td> <td>{$T.row.CreateDate}</td> </tr> {#/for} </table> </textarea> --></div></body></html>
这里需要注意几点:
1、首先模板样式必须要用<textarea></textarea>标签,否则也可以放入
<script id="template"><div><strong>部门编号:{$T.list_id}</strong></div><div><strong>负责人:{$T.name} </strong></div><div><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></div></script>
中,都是可以的
2、json格式必须是正确的,而且不能用单引号,都是双引号
最终显示效果如下:
- jquery jtemplates.js模板渲染引擎的详细用法第一篇
- jquery jtemplates.js模板渲染引擎的详细用法第二篇
- jquery jtemplates.js模板渲染引擎的详细用法第三篇
- jTemplates是javascript的模板引擎,基于jquery的插件
- 基于jquery框架的jTemplates模板引擎的使用
- JS模板引擎jTemplates使用笔记详解
- JS模板引擎jTemplates使用笔记详解
- jTemplates模板引擎使用说明
- jQuery插件---jTemplates(模板)
- jQuery插件---jTemplates(模板)
- jquery插件jTemplates用法
- jquery插件jTemplates用法
- 【jQuery】利用jTemplates实现兼容IE6的jQuery模板化
- jQuery 模板 jTemplates 使用心得
- 推荐好用的Jquery模板插件jTemplates
- jquery模板插件jTemplates代替拼html
- 【Web】artTemplate模板引擎:编译(生成渲染函数)+渲染(生成HTML串) 模板:基于JS的语法(JS+自定义)+HTML
- Jtemplete/客户端模板的脚本渲染引擎
- 跨域的jsonp
- Eclipse、Android Studio颜色、字体样式设置
- 英国脱欧公投是英国制造业萎靡的罪魁祸首?
- 版本更新
- dialog
- jquery jtemplates.js模板渲染引擎的详细用法第一篇
- Scrapy、Python研习
- main
- java虚拟机类加载机制
- Viewpager
- pitch yaw roll
- 文章标题
- git和github,oschina用法
- as缓动类的用法