一、背景介绍
在JSP页面开发中,关于页面中html代码的组建方式有两种:
1、在JSP页面使用jsp<%%>语言或<c:each>等标签进行组建,优点:保持html原有格式,缺点:占用大量服务器资源,而且速度缓慢;
2、通过Ajax请求返回json对象,for循环等进行html代码组建,优点:反应速度非常快,用户体验非常好,缺点:无法html原有格式
在这里,推荐后者,因为服务器端只需要提供一个json串,由客户端完成解析,因此服务器承受的压力很小,目前的电脑配置都较高,客户端的浏览器解析js脚本很快,因此页面体验效果好。
然而,后者在组装html代码字符串的时候,会十分痛苦,如下:
1 var contractTextHtml="";
2 $.each(jsonObject.cl,function(i,n){
3
4 contractTextHtml="";
5
6 //插入合同文本数据
7 contractTextHtml+="<div title='出借人信息---"+hiddenNull(n.cm.lenderName)+"' style='overflow:auto;padding:5px;'>";
8 contractTextHtml+="<table class='ui-table ui-table-noborder'>";
9 contractTextHtml+="<tbody>";
10 contractTextHtml+="<tr><td>合同编号:</td><td><p>"+hiddenNull(n.cm.contractId)+"</p></td></tr>";
11 contractTextHtml+="<tr class='ui-table-split'><td>出借人姓名:</td><td><p>"+hiddenNull(n.cm.lenderName)+"</p></td></tr>";
12 contractTextHtml+="<tr><td>出借人证件类型:</td><td><p>"+hiddenNull(n.cm.lenderIdType)+"</p></td></tr>";
13 contractTextHtml+="<tr class='ui-table-split'><td>出借人证件号:</td><td><p>"+hiddenNull(n.cm.lenderIdNum)+"</p></td></tr>";
14 contractTextHtml+="<tr><td>出借金额:</td><td><p>"+hiddenNull(n.cm.lenderAmount)+"</p></td></tr>";
15 contractTextHtml+="<tr class='ui-table-split'><td>出借人编号:</td><td><p>"+hiddenNull(n.cm.lenderNo)+"</p></td></tr>";
16 contractTextHtml+="<tr><td>出借人银行帐号:</td><td><p>"+hiddenNull(n.cm.lenderBankAccount)+"</p></td></tr>";
17 contractTextHtml+="<tr class='ui-table-split'><td>撮合编号:</td><td><p>"+hiddenNull(n.cm.makeMatchNo)+"</p></td></tr>";
18 contractTextHtml+="</tbody>";
19 contractTextHtml+="</table>";
20 contractTextHtml+="</div>";
21 $("#textList").append(contractTextHtml);
22 });
二、handlerbar.js的介绍与使用
关于既能保持html格式,又要快速反应到客户端,因此在需要集合两者的优点进行快速开发html页面,这就是handlerbar.js.
Handlebars.js是一款基于Jquery的插件,以json对象为数据源,支持逻辑判断、循环等操作,同时具有非常好的扩展性,体积60KB左右。
handlerbar.js是需要依赖jquery插件,所以页面中没有依赖jquery,强烈建议使用jquery,因为jquery能让你的js编写减少一半的工作量。
在页面引用js,这里就不做说明啦。Ok,下面开始学习如何使用handlerbar.js。
首先,学习each循环的基础使用 (引用其他教程---来源为:js模版引擎handlebars.js实用教程)。
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <META http-equiv=Content-Type content="text/html; charset=utf-8">
5 <title>each-基本循环使用方法</title>
6 </head>
7 <body>
8 <h1>each-基本循环使用方法</h1>
9 <!--基础html框架-->
10 <table>
11 <thead>
12 <tr>
13 <th>姓名</th>
14 <th>性别</th>
15 <th>年龄</th>
16 </tr>
17 </thead>
18 <tbody id="tableList">
19
20 </tbody>
21 </table>
22
23 <!--插件引用-->
24 <script type="text/javascript" src="script/jquery.js"></script>
25 <script type="text/javascript" src="script/handlebars-1.0.0.beta.6.js"></script>
26
27 <!--Handlebars.js模版-->
28 <!--Handlebars.js模版放在script标签中,保留了html原有层次结构,模版中要写一些操作语句-->
29 <!--id可以用来唯一确定一个模版,type是模版固定的写法-->
30 <script id="table-template" type="text/x-handlebars-template">
31 {{#each this}}
32 <tr>
33 <td>{{name}}</td>
34 <td>{{sex}}</td>
35 <td>{{age}}</td>
36 </tr>
37 {{/each}}
38 </script>
39
40 <!--进行数据处理、html构造-->
41 <script type="text/javascript">
42 $(document).ready(function() {
43 //模拟的json对象
44 var data = [
46 {
47 "name": "张三",
48 "sex": "0",
49 "age": 18
50 },
51 {
52 "name": "李四",
53 "sex": "0",
54 "age": 22
55 },
56 {
57 "name": "妞妞",
58 "sex": "1",
59 "age": 18
60 }
61 ];
63
64 //注册一个Handlebars模版,通过id找到某一个模版,获取模版的html框架
65 //$("#table-template").html()是jquery的语法,不懂的童鞋请恶补。。。
66 var myTemplate = Handlebars.compile($("#table-template").html());
67
68 //将json对象用刚刚注册的Handlebars模版封装,得到最终的html,插入到基础table中。
69 $('#tableList').html(myTemplate(data));
70 });
71 </script>
72 </body>
73 </html>
好了,这样子我们就很快的完成了一个表格html代码开发,除了each,还有if判断等等操作。
其次,是Helper方法注册,从而满足更多开发需求,如:日期转换、数字比较等。例子如下:
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <META http-equiv=Content-Type content="text/html; charset=utf-8">
5 <title>由于if功力不足引出的Helper</title>
6 </head>
7 <body>
8 <h1>由于if功力不足引出的Helper</h1>
9 <!--基础html框架-->
10 <table>
11 <thead>
12 <tr>
13 <th>姓名</th>
14 <th>性别</th>
15 <th>年龄</th>
16 </tr>
17 </thead>
18 <tbody id="tableList">
19
20 </tbody>
21 </table>
22
23 <!--插件引用-->
24 <script type="text/javascript" src="script/jquery.js"></script>
25 <script type="text/javascript" src="script/handlebars-1.0.0.beta.6.js"></script>
26
27 <!--Handlebars.js模版-->
28 <!--Handlebars.js模版放在script标签中,保留了html原有层次结构,模版中要写一些操作语句-->
29 <!--id可以用来唯一确定一个模版,type是模版固定的写法-->
30 <script id="table-template" type="text/x-handlebars-template">
31 {{#each student}}
32 {{#if name}}
33 {{#compare age 20}}
34 <tr>
35 <td>{{name}}</td>
36 <td>{{sex}}</td>
37 <td>{{age}}</td>
38 </tr>
39 {{else}}
40 <tr>
41 <td>?</td>
42 <td>?</td>
43 <td>?</td>
44 </tr>
45 {{/compare}}
46 {{/if}}
47 {{/each}}
48 </script>
49
50 <!--进行数据处理、html构造-->
51 <script type="text/javascript">
52 $(document).ready(function() {
53 //模拟的json对象
54 var data = {
55 "student": [
56 {
57 "name": "张三",
58 "sex": "0",
59 "age": 23
60 },
61 {
62 "sex": "0",
63 "age": 22
64 },
65 {
66 "name": "妞妞",
67 "sex": "1",
68 "age": 18
69 }
70 ]
71 };
72
73 //注册一个Handlebars模版,通过id找到某一个模版,获取模版的html框架
74 //$("#table-template").html()是jquery的语法,不懂的童鞋请恶补。。。
75 var myTemplate = Handlebars.compile($("#table-template").html());
76
77 //注册一个比较大小的Helper,判断v1是否大于v2
78 Handlebars.registerHelper("compare",function(v1,v2,options){
79 if(v1>v2){
80 //满足添加继续执行
81 return options.fn(this);
82 }else{
83 //不满足条件执行{{else}}部分
84 return options.inverse(this);
85 }
86 });
87
88 //将json对象用刚刚注册的Handlebars模版封装,得到最终的html,插入到基础table中。
89 $('#tableList').html(myTemplate(data));
90 });
91 </script>
92 </body>
93 </html>
最后,还有一些温馨小tips:
1. 在handlerbar.js模板中,因为所有输出都先转义再输出的,正常的html代码都会转义,如:<div>,输出为<div>等。如果要输出html格式代码,只需要将{{html}}更改为{{{html}}}即可;
2. 在each循环中,需要对索引值进行输出,利用@index,如:{{#each this}} {{@index}}{{/each}}
三、学习资源
关于更多handlerbar.js的使用,还有很多其他方便快捷方法使用,推荐几个学习网站。
入门教程:http://www.cnblogs.com/iyangyuan/archive/2013/12/12/3471227.html