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格式必须是正确的,而且不能用单引号,都是双引号

最终显示效果如下:

posted @ 2016-07-01 08:31  ching126  阅读(5242)  评论(0编辑  收藏  举报
一个小小的平凡的事情坚持10年,回头看看,你会收获惊喜;坚持20年,回头看看,你的命运已经发生质的蜕变;坚持30年甚至更多年,回头看看,你的人生已经发生惊天动地的变化。