jquery jtemplates.js模板渲染引擎的详细用法第二篇
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]);
当你遇到挫折和困难时，千万记住永远永远永远不要放弃
