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格式必須是正確的，而且不能用單引號，都是雙引號
最終顯示效果如下：