1、什么是handlebars???是用来做什么的???
首先我们要了解几种前端页面展示的几种模式:
a、Struct+vo+el表达式的模式
这种模式的特点:代码看起来比较整齐,但代码解析完才发送到客户端显示的。
<c:forEach var='bm' items="${contractAuditVo.borrowerModels}">
<table>
<tbody>
<tr>
<td>借款人编号:</td>
<td>
<p>
${bm.borrowerId }
</p>
</td>
</tr>
<tr>
<td>客户编号:</td>
<td>
<p>
${bm.customerId }
</p>
</td>
</tr>
<tr>
<td>曾用名:</td>
<td>
<p>
${bm.usedName }
</p>
</td>
</tr>
</tbody>
</table>
</c:forEach>
b、Json+ajax+html显示
这种模式的特点:代码的解析在客户端,解析比较快,用户体验好,但是表现层和控制层是混在一块的,不利于后期的维护,代码不美观。
var contractTextHtml="";
$.each(jsonObject.cl,function(i,n){
contractTextHtml="";
//插入合同文本数据
contractTextHtml+="<div title='出借人信息---"+hiddenNull(n.cm.lenderName)+"' style='overflow:auto;padding:5px;'>";
contractTextHtml+="<table class='ui-table ui-table-noborder'>";
contractTextHtml+="<tbody>";
contractTextHtml+="<tr><td>合同编号:</td><td><p>"+hiddenNull(n.cm.contractId)+"</p></td></tr>";
contractTextHtml+="<tr class='ui-table-split'><td>出借人姓名:</td><td><p>"+hiddenNull(n.cm.lenderName)+"</p></td></tr>";
contractTextHtml+="<tr><td>出借人证件类型:</td><td><p>"+hiddenNull(n.cm.lenderIdType)+"</p></td></tr>";
contractTextHtml+="<tr class='ui-table-split'><td>出借人证件号:</td><td><p>"+hiddenNull(n.cm.lenderIdNum)+"</p></td></tr>";
contractTextHtml+="<tr><td>出借金额:</td><td><p>"+hiddenNull(n.cm.lenderAmount)+"</p></td></tr>";
contractTextHtml+="<tr class='ui-table-split'><td>出借人编号:</td><td><p>"+hiddenNull(n.cm.lenderNo)+"</p></td></tr>";
contractTextHtml+="<tr><td>出借人银行帐号:</td><td><p>"+hiddenNull(n.cm.lenderBankAccount)+"</p></td></tr>";
contractTextHtml+="<tr class='ui-table-split'><td>撮合编号:</td><td><p>"+hiddenNull(n.cm.makeMatchNo)+"</p></td></tr>";
contractTextHtml+="</tbody>";
contractTextHtml+="</table>";
contractTextHtml+="</div>";
$("#textList").append(contractTextHtml);
});
到这儿我们就要考虑了,能不能把二者的优点结合起来,因此我们的Handlebars就应运而生了。。。。。。
它的特点:i、它是基于jQuery的插件,所以千万别忘了引入jQuery的jar包和他的jar包
ii、json对象最为数据源,分模块编写,结构清晰。
2、这东西怎么用那????
用起来也是相当的简单,可以说:简单粗暴有力,毕竟是建立在别人心血的基础上,所以在用它的时候,我们要好好感谢一下整合这个东西的人!!!
a、第一步:引入相关的jar包
1 <script type="text/javascript" src="script/jquery.js"></script>
2 <script type="text/javascript" src="script/handlebars-1.0.0.beta.6.js"></script>
b、获取到json串,这儿我们模拟一个Jason串即可
c、写一个html的框架将其封装到<script>中
d、写一个由id唯一确定的Handlebar模板,获取html的框架。
e、将上一步获得的Handlebar模板插入到html代码中即可。
<!DOCTYPE html>
<html>
<head>
<META http-equiv=Content-Type content="text/html; charset=utf-8">
<title>each-基本循环使用方法 - by 杨元</title>
</head>
<body>
<h1>each-基本循环使用方法</h1>
<!--基础html框架-->
<table>
<thead>
<tr>
<th>姓名</th>
<th>性别</th>
<th>年龄</th>
</tr>
</thead>
<tbody id="tableList">
</tbody>
</table>
<!--插件引用-->
<script type="text/javascript" src="script/jquery.js"></script>
<script type="text/javascript" src="script/handlebars-1.0.0.beta.6.js"></script>
<!--Handlebars.js模版-->
<!--Handlebars.js模版放在script标签中,保留了html原有层次结构,模版中要写一些操作语句-->
<!--id可以用来唯一确定一个模版,type是模版固定的写法-->
<script id="table-template" type="text/x-handlebars-template">
{{#each student}}
<tr>
<td>{{name}}</td>
<td>{{sex}}</td>
<td>{{age}}</td>
</tr>
{{/each}}
</script>
<!--进行数据处理、html构造-->
<script type="text/javascript">
$(document).ready(function() {
//模拟的json对象
var data = {
"student": [
{
"name": "张三",
"sex": "0",
"age": 18
},
{
"name": "李四",
"sex": "0",
"age": 22
},
{
"name": "妞妞",
"sex": "1",
"age": 18
}
]
};
//注册一个Handlebars模版,通过id找到某一个模版,获取模版的html框架
//$("#table-template").html()是jquery的语法,不懂的童鞋请恶补。。。
var myTemplate = Handlebars.compile($("#table-template").html());
//将json对象用刚刚注册的Handlebars模版封装,得到最终的html,插入到基础table中。
$('#tableList').html(myTemplate(data));
});
</script>
</body>
</html>
这是效果图,灰常的nice!!!