HanderBar js模版引擎handlebars.js实用教程——each-循环中使用this js模版引擎handlebars.js实用教程——each嵌套 js模版引擎handlebars.j
对于java开发，涉及到页面展现时，比较主流的有两种解决方案：javascript
1. struts2+vo+el表达式。html
这种方式，重点不在于struts2，而是vo和el表达式，其基本思想是：根据页面须要的信息，构造出一个实体，这个实体中包含了界面须要的全部属性，一般这个实体是由N个表中的字段构成的，俗称vo。因为vo的属性能够是String、List、Map等等等，又能够vo套vo，所以这种方式很是灵活，也很是好用。java
在后台对vo进行赋值，经过struts2封装到request中，而后在界面用el表达式，一般是${}、forEach标签什么的，便可构造出界面。jquery
但这种方式小菜却不是很看好。由于这种利用标签控制html，依然是把表现和控制混杂在一块儿，html里边混杂了大量el控制标签，很不美观。ajax
固然，小菜不可能由于这么简单的理由拒绝这种方式，读者仔细思考能够发现，利用el表达式生成html代码，这是一个在服务器端执行的动做，在服务器端解析完成以后，才发送到客户端浏览器上，这样作会占用大量服务器资源，并且速度缓慢。json
示例代码：bootstrap
1 <c:forEach var='bm' items="${contractAuditVo.borrowerModels}">
2 <table>
3 <tbody>
4 <tr>
5 <td>借款人编号：</td>
6 <td>
7 <p>
8 ${bm.borrowerId }
9 </p>
10 </td>
11 </tr>
12 <tr>
13 <td>客户编号：</td>
14 <td>
15 <p>
16 ${bm.customerId }
17 </p>
18 </td>
19 </tr>
20 <tr>
21 <td>曾用名：</td>
22 <td>
23 <p>
24 ${bm.usedName }
25 </p>
26 </td>
27 </tr>
28 </tbody>
29 </table>
30 </c:forEach>
2. Json+ajax+拼html。浏览器
这种方法通常是基于ajax请求，要求服务器端返回一个json类型的json字符串，这个json串中包含了界面所需的全部信息，界面拿到json串后，构造出html，完成界面展现。服务器
小菜推荐这种方法，经过这种方式编写的页面，反应速度很是快，用户体验很是好。app
由于服务器端只须要提供一个json串，由客户端完成解析，所以服务器承受的压力很小，目前的电脑配置都较高，客户端的浏览器解析js脚本很快，所以页面体验效果好。
解析的过程大体是经过Jquery的each方法，进行遍历。
可是小菜利用这种方式时，犯了一个致命的错误，小菜是经过原始的拼接html的方式，页面中写了大量html+=”<div>”;，这种写法使页面变得很是凌乱，几乎不能够维护。
示例代码：
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 });
形成这种问题的根本缘由在于拼接html打乱了html原有的层次结构，看不出来哪里是哪里，没有了层次结构的代码，堆在那里就像是一坨垃圾。
el表达式构造html优势是可以保持html原有格式，js构造html优势是速度快省资源，为何咱们不能把两者的优势结合在一块儿呢？这就是Handlebars.js。
既然要在项目中引入js模版引擎，就必须进行技术选型，严格考核以后，才能够引入，就好像是木桶效应，不能让他成为项目中的短板。
Handlebars.js是一款基于Jquery的插件，以json对象为数据源，支持逻辑判断、循环等操做，同时具备很是好的扩展性，体积60KB左右，通过小菜仔细的分析研究，这是一款不可多得的js模版引擎。
Jquery插件，第一步固然要引用Jquery啦，而后引用Handlebars.js便可，仅仅须要这两个js文件。
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>
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <META http-equiv=Content-Type content="text/html; charset=utf-8">
5 <title>each-基本循环使用方法 - by 杨元</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 student}}
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 = {
45 "student": [
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 ]
62 };
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>
经过阅读本例，读者已经掌握Handlebars.js一个重要特性：循环。#each能够理解成循环命令，循环的是json对象中的student属性。对于每次循环，均可以读出里边的name、sex、age属性。
js模版引擎handlebars.js实用教程——each-循环中使用this
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <META http-equiv=Content-Type content="text/html; charset=utf-8">
5 <title>each-循环中使用this - by 杨元</title>
6 </head>
7 <body>
8 <h1>each-循环中使用this</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 = [
45 {
46 "name": "张三",
47 "sex": "0",
48 "age": 18
49 },
50 {
51 "name": "李四",
52 "sex": "0",
53 "age": 22
54 },
55 {
56 "name": "妞妞",
57 "sex": "1",
58 "age": 18
59 }
60 ];
61
62 //注册一个Handlebars模版，经过id找到某一个模版，获取模版的html框架
63 //$("#table-template").html()是jquery的语法，不懂的童鞋请恶补。。。
64 var myTemplate = Handlebars.compile($("#table-template").html());
65
66 //将json对象用刚刚注册的Handlebars模版封装，获得最终的html，插入到基础table中。
67 $('#tableList').html(myTemplate(data));
68 });
69 </script>
70 </body>
71 </html>
不少时候，咱们拿到的json对象，自己就是一个list，并非map，直接就能够遍历，不须要#each student这样指定遍历某个属性。
此时能够用#each this，表示遍历当前对象。
this表示当前上下文，很是灵活
js模版引擎handlebars.js实用教程——each嵌套
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <META http-equiv=Content-Type content="text/html; charset=utf-8">
5 <title>each嵌套 - by 杨元</title>
6 </head>
7 <body>
8 <h1>each嵌套</h1>
9 <!--基础html框架-->
10 <div id="dataList"></div>
11
12 <!--插件引用-->
13 <script type="text/javascript" src="script/jquery.js"></script>
14 <script type="text/javascript" src="script/handlebars-1.0.0.beta.6.js"></script>
15
16 <!--Handlebars.js模版-->
17 <!--Handlebars.js模版放在script标签中，保留了html原有层次结构,模版中要写一些操做语句-->
18 <!--id能够用来惟一肯定一个模版,type是模版固定的写法-->
19 <script id="table-template" type="text/x-handlebars-template">
20 {{#each this}}
21 {{#each info}}
22 {{../name}}的{{this}}<br>
23 {{/each}}
24 {{/each}}
25 </script>
26
27 <!--进行数据处理、html构造-->
28 <script type="text/javascript">
29 $(document).ready(function() {
30 //模拟的json对象
31 var data = [{
32 "name":"张三",
33 "info":[
34 "眼睛",
35 "耳朵",
36 "鼻子"
37 ]
38 },{
39 "name":"李四",
40 "info":[
41 "爸爸",
42 "妈妈",
43 "妻子"
44 ]
45 }];
46
47 //注册一个Handlebars模版，经过id找到某一个模版，获取模版的html框架
48 //$("#table-template").html()是jquery的语法，不懂的童鞋请恶补。。。
49 var myTemplate = Handlebars.compile($("#table-template").html());
50
51 //将json对象用刚刚注册的Handlebars模版封装，获得最终的html，插入到基础table中。
52 $('#dataList').html(myTemplate(data));
53 });
54 </script>
55 </body>
56 </html>
循环嵌套在稍微复杂点的页面设计中即会涉及，Handlebars.js彻底支持each嵌套，能够在each中使用each。
上边的例子演示了两个关键点：each嵌套的可实现性、如何在each嵌套中读取父each中的数据。
例子很简单，info自己是一个信息列表，是属于某我的的，咱们先用each遍历全部的人，而后再遍历每一个人的info信息，这样就造成了each嵌套。可是咱们想在内层each中获取外层each的数据，达到“谁的什么”这样的显示效果。
显然，若是直接在内层each中使用{{name}}，是取不到任何数据的，由于内层each的上下文是info，而name属性在表示人的上下文中。
此时，能够用{{../name}}从内层each获取上一级each的name属性，语法和html的路径表示同样，简单吧？
js模版引擎handlebars.js实用教程——循环中使用索引
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <META http-equiv=Content-Type content="text/html; charset=utf-8">
5 <title>关于循环中索引的使用 - by 杨元</title>
6 </head>
7 <body>
8 <h1>关于循环中索引的使</h1>
9 <!--基础html框架-->
10 <table>
11 <thead>
12 <tr>
13 <th>序号</th>
14 <th>姓名</th>
15 <th>性别</th>
16 <th>年龄</th>
17 </tr>
18 </thead>
19 <tbody id="tableList">
20
21 </tbody>
22 </table>
23
24 <!--插件引用-->
25 <script type="text/javascript" src="script/jquery.js"></script>
26 <!--注意！这个例子用的是新版本handlebars，旧版本不支持-->
27 <script type="text/javascript" src="script/handlebars-v1.3.0.js"></script>
28
29 <!--Handlebars.js模版-->
30 <!--Handlebars.js模版放在script标签中，保留了html原有层次结构,模版中要写一些操做语句-->
31 <!--id能够用来惟一肯定一个模版,type是模版固定的写法-->
32 <script id="table-template" type="text/x-handlebars-template">
33 {{#each student}}
34 <tr>
35 <td>{{addOne @index}}</td>
36 <td>{{name}}</td>
37 <td>{{sex}}</td>
38 <td>{{age}}</td>
39 </tr>
40 {{/each}}
41 </script>
42
43 <!--进行数据处理、html构造-->
44 <script type="text/javascript">
45 $(document).ready(function() {
46 //模拟的json对象
47 var data = {
48 "student": [
49 {
50 "name": "张三",
51 "sex": "0",
52 "age": 18
53 },
54 {
55 "name": "李四",
56 "sex": "0",
57 "age": 22
58 },
59 {
60 "name": "妞妞",
61 "sex": "1",
62 "age": 19
63 }
64 ]
65 };
66
67 //注册一个Handlebars模版，经过id找到某一个模版，获取模版的html框架
68 //$("#table-template").html()是jquery的语法，不懂的童鞋请恶补。。。
69 var myTemplate = Handlebars.compile($("#table-template").html());
70
71 //注册一个Handlebars Helper,用来将索引+1，由于默认是从0开始的
72 Handlebars.registerHelper("addOne",function(index,options){
73 return parseInt(index)+1;
74 });
75
76 //将json对象用刚刚注册的Handlebars模版封装，获得最终的html，插入到基础table中。
77 $('#tableList').html(myTemplate(data));
78 });
79 </script>
80 </body>
81 </html>
序号是指：在循环过程当中，当前循环的索引，说白了，就是当前为第几回循环，通常从0开始，Handlebars.js中也是如此。
有什么用呢？最多见的是在显示table的时候，给每行加一个序号，清晰的展现出页面上共有多少条记录，如上边的例子。
除此以外，小菜为了在循环中区分不一样的id，刚好须要一个序号，确保id不重复，用过bootstrap的童鞋应该知道，好多事件能够经过id定位，例如Listgroup控件。
废话少说，在Handlebars.js中，能够经过{{@index}}来获取当前的索引，也就是说@index这个变量就表明了当前索引。
在上边的例子里，table的序号从0开始不太好，因而注册了一个Helper，将索引+1。
- 1. js模版引擎handlebars.js实用教程
- 2. js模版引擎handlebars.js实用教程——each-循环中使用this
- 3. js模版引擎handlebars.js实用教程——each-基本循环使用方法
- 4. js模版引擎handlebars.js实用教程——with-终极this应用
- 5. js模版引擎handlebars.js实用教程——循环中使用索引
- 6. handlebars.js模版引擎中EACH循环遍历的使用
- 7. js模版引擎handlebars.js实用教程——关于HTML编码
- 8. js模版引擎handlebars.js实用教程——目录
- 9. js模版引擎handlebars.js实用教程——if-判断的基本用法
- 10. js模版引擎handlebars.js实用教程——另外一种Helper用法
- 更多相关文章...
- • SEO - 搜索引擎优化 - 网站建设指南
- • TortoiseSVN 使用教程 - SVN 教程
- • 委托模式
- • Git可视化极简易教程 — Git GUI使用方法
-
每一个你不满意的现在，都有一个你没有努力的曾经。
- 1. 「插件」Runner更新Pro版，帮助设计师远离996
- 2. 错误 707 Could not load file or assembly ‘Newtonsoft.Json, Version=12.0.0.0, Culture=neutral, PublicKe
- 3. Jenkins 2018 报告速览，Kubernetes使用率跃升235%！
- 4. TVI-Android技术篇之注解Annotation
- 5. android studio启动项目
- 6. Android的ADIL
- 7. Android卡顿的检测及优化方法汇总（线下+线上）
- 8. 登录注册的业务逻辑流程梳理
- 9. NDK(1)创建自己的C/C++文件
- 10. 小菜的系统框架界面设计-你的评估是我的决策
- 1. js模版引擎handlebars.js实用教程
- 2. js模版引擎handlebars.js实用教程——each-循环中使用this
- 3. js模版引擎handlebars.js实用教程——each-基本循环使用方法
- 4. js模版引擎handlebars.js实用教程——with-终极this应用
- 5. js模版引擎handlebars.js实用教程——循环中使用索引
- 6. handlebars.js模版引擎中EACH循环遍历的使用
- 7. js模版引擎handlebars.js实用教程——关于HTML编码
- 8. js模版引擎handlebars.js实用教程——目录
- 9. js模版引擎handlebars.js实用教程——if-判断的基本用法
- 10. js模版引擎handlebars.js实用教程——另外一种Helper用法