jquery jtemplates.js模板渲染引擎的详细用法第一篇
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的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"，然后就是处理数据，这里的打他就是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格式必须是正确的，而且不能用单引号，都是双引号
最终显示效果如下：
aaarticlea/png;base64,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" alt="" />
jquery jtemplates.js模板渲染引擎的详细用法第一篇的更多相关文章
- jquery jtemplates.js模板渲染引擎的详细用法第二篇
jquery jtemplates.js模板渲染引擎的详细用法第二篇 关于jtemplates.js的用法在第一篇中已经讲过了,这里就直接上代码,不同之处是绑定模板的方式,这里讲模板的数据专门写一个t ...
- jquery jtemplates.js模板渲染引擎的详细用法第三篇
jquery jtemplates.js模板渲染引擎的详细用法第三篇 <span style="font-family:Microsoft YaHei;font-size:14px;& ...
- template.js 数据渲染引擎
template.js 数据渲染引擎 template.js是一款JavaScript模板引擎,用来渲染页面的. 原理:提前将Html代码放进编写模板 <script id="tpl& ...
- jquery validate.js表单验证的基本用法入门
这里转载一篇前辈写的文章,在我自己的理解上修改了一下,仅作记录. 先贴一个国内某大公司的代码: 复制代码 代码如下: <script type="text/javascript&quo ...
- jquery.tmpl.js 模板引擎用法
1.0 引入: <script src="/js/jquery.tmpl.min.js"></script> 2.0 模板: <script type ...
- nunjucks.js模板渲染
直接用 script 引入文件: <script src="nunjucks.js"></script> 是使用 render 来直接渲染文件,这种方式支持 ...
- Html模板渲染引擎Hogan
Github:https://github.com/twitter/hogan.js 最简单的使用教程:http://www.imooc.com/article/18493
- spring Boot+spring Cloud实现微服务详细教程第一篇
前些天项目组的大佬跟我聊,说项目组想从之前的架构上剥离出来公用的模块做微服务的开发,恰好去年的5/6月份在上家公司学习了国内开源的dubbo+zookeeper实现的微服务的架构.自己平时对微服务的设 ...
- (4)Flask项目模板渲染初体验
一.准备静态资源 将项目使用到的静态资源拷贝到static目录 二.创建前台首页html 创建templates/home/home.html页面,内容包含导航和底部版权两部分,中间内容区域为模板标签 ...
随机推荐
- 小米系列手机调试Installation failed with message Failed to establish session
用Android studio 2.3调度程序时提示"Installation failed with message Failed to establish session"错误 ...
- 算法（Algorithms）第4版 练习 1.3.18
1.3.18 Deletes from the list the node immediately following x.
- tkinter之button
Button按钮,直接上代码: from tkinter import * def gs(): global read s=Label(read,text='昨夜西风凋敝树,堵上高楼,望尽天涯路!', ...
- html5 手写的canvas实现
试用支持canvas的浏览器,无JS依赖,运用新的HTML5技术DrawBoard.renderDrawer('myHandWrite',{ penColor:'#FF0000', penWidt ...
- Cocos2d-x中判断点击是否在触摸屏区域
新建2dx工程. 在HelloWorld头文件加入以下语句: virtual void registerWithTouchDispatcher();//注册触屏事件 覆写register方法 virt ...
- BZOJ 1201 [HNOI2005]数三角形：枚举 + 前缀和
题目链接:http://www.lydsy.com/JudgeOnline/problem.php?id=1201 题意: 有一个边长为n的正三角形网格,去掉其中一些线段,问你在这幅图中有多少个三角形 ...
- C/C++ 混合编程
[面试] C/C++ 语法(五) -- extern 1. C 调用 C++ 开发的DLL库 C和C++混合编程(__cplusplus 与 external "c" 的使用) # ...
- 「UVA644」 Immediate Decodability（Trie
题意翻译 本题有多组数据.每组数据给出一列以"9"结尾的仅包含'0'和'1'的字符串,如果里面有一个是另一个的子串,输出"Set &case is not imm ...
- 【LeetCode】011 Container With Most Water
题目: Given n non-negative integers a1, a2, ..., an, where each represents a point at coordinate (i, a ...
- mongodb入门-关系型RDMS数据库对比及适用场景
引言 最近工作接触到了mongodb数据库,记录下个人对其的理解和使用情况.虽然mongodb 出来的时间已经不短,但是相对mysql mssql oracle 这样传统的关系型数据库来说还是比较年轻 ...