标签：客户端浏览器 语法 例子 利用 ons 技术选型 拒绝 通过 服务
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的路径表示一样，简单吧？
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。
标签：客户端浏览器 语法 例子 利用 ons 技术选型 拒绝 通过 服务
原文地址：http://www.cnblogs.com/y654063871/p/7077061.html
