Handlebars学习第一天
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！！！
