jquery jtemplates.js模板渲染引擎的詳細用法第二篇
關於jtemplates.js的用法在第一篇中已經講過了，這里就直接上代碼，不同之處是綁定模板的方式，這里講模板的數據專門寫一個template.html的文件來展示
<span style="font-family:Microsoft YaHei;font-size:14px;"><!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;
}
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 formatMail(mail){
// result mail.replace(/@|\./g,'^_^');
// // result "90";
// }
</script>
<script type="text/javascript">
$(function(){
// 獲取JSON數據並且賦值顯示
$.getJSON("./data/dataSource.json", function(data){
// // 設置模板
// $("#result").setTemplateURL("template.html");
// // 給模板加載數據
// $("#result").processTemplate(data);
// setTemplateElement("id"); 參數為頁面中的一個元素ID
// setTemplate(""); 參數為具體的模板內容 $("#result").setTemplate("Template by {$T.bold()} version <em>{$Q.version}</em>.");
// setTemplateURL(""); 使用外部獨立模板文件Url作為參數
$("#result").setTemplateURL("template.html").processTemplate(data);
});
});
</script>
</head>
<body>
<div class="container">
<div id="result"></div>
</div>
</body>
</html></span>
模板文件如下：
<span style="font-family:Microsoft YaHei;font-size:14px;"><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.replace(/@|\./g,'^_^')}</td>
<!-- <td>{formatMail($T.record.mail)}</td> -->
</tr>
{#/for}
</table>
</div>
</span>
沒錯就是這樣子，重點在於
<span style="font-family:Microsoft YaHei;font-size:14px;">$("#result").setTemplateURL("template.html").processTemplate(data);</span>
這句意思就是用id=“result”來承載結果，用template.html顯示樣式，processTemplate(data)用來處理數據到template.html上
這里的設置模板的方法有三種：
$("#result").setTemplateElement("template").processTemplate(data);
$("#result").setTemplateURL("template.html").processTemplate(data);
$("#result").setTemplate("").processTemplate(data);
官網原文如下：
// set templates
jQuery jQuery.fn.setTemplate(String template, [Array includes], [Object settings]);
jQuery jQuery.fn.setTemplate(Template template);
jQuery jQuery.fn.setTemplateURL(String url, [Array includes], [Object settings]);
jQuery jQuery.fn.setTemplateElement(String elementName, [Array includes], [Object settings]);