jquery jtemplates.js模板渲染引擎的詳細用法第一篇
jquery jtemplates.js模板渲染引擎的詳細用法第一篇javascript
Author:chingphp
Date:2016-06-29css
jTemplates是一個基於JQuery的模板引擎插件，功能強大，有了他你就再不用爲使用JS綁定數據時發愁了。後端語言使用php,asp.net,jsp等都不是問題，使用模板渲染能夠很大程度上提升程序性能，使用異步獲取數據，不用整個頁面都回發，好處固然不單單是這些。html
下載jtemplates，官網的文檔寫得很是的詳細java
打開官網：http://jtemplates.tpython.com/python
左側找到Download，而後直接點擊要下載的文件便可，當前最新版本是0.8.4jquery
jTemplates配合jQuery的delegate事件處理方法可讓你迷戀沒法自拔。哈哈...json
下面是詳細用法總結：後端
jtemplates模板的簡單使用，首先使用jtemplates就要使用json數據，在這裏咱們不妨構造一個json格式的數據，以下：asp.net
{
"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>
這裏須要注意幾點：
一、首先模板樣式必需要用<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>
中，都是能夠的
二、json格式必須是正確的，並且不能用單引號，都是雙引號
最終顯示效果以下：
相關文章
- 1. 模板渲染引擎
- 2. 【模板引擎】什麼會用到模板引擎？頁面渲染選擇thymeleaf模板引擎還是Vue？
- 3. 模板引擎 Thymeleaf 動態渲染 HTML
- 4. 模板引擎渲染頁面
- 5. 模板渲染引擎手冊
- 6. koa test3 ejs模板引擎 views渲染
- 7. 第三天： 使用Themeleaf模板引擎渲染web視圖
- 8. 模板引擎doT.js用法詳解(HTML模板引擎)
- 9. flask框架下的jinja2模板引擎(1)(模板渲染)
- 10. art_template模板引擎渲染數據的小方法
- 更多相關文章...
- • Maven 項目模板 - Maven教程
- • Eclipse 代碼模板 - Eclipse 教程
- • C# 中 foreach 遍歷的用法
- • 委託模式
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
最新文章
- 1. js中 charCodeAt
- 2. Android中通過ViewHelper.setTranslationY實現View移動控制（NineOldAndroids開源項目）
- 3. 【Android】日常記錄：BottomNavigationView自定義樣式，修改點擊後圖片
- 4. maya 文件檢查 ui和數據分離 （一）
- 5. eclipse 修改項目的jdk版本
- 6. Android InputMethod設置
- 7. Simulink中Bus Selector出現很多? ? ?
- 8. 【Openfire筆記】啓動Mac版Openfire時提示「系統偏好設置錯誤」
- 9. AutoPLP在偏好標籤中的生產與應用
- 10. 數據庫關閉的四種方式
歡迎關注本站公眾號,獲取更多信息
