07-循環中索引使用技巧(訪問父級索引)

2024-04-27 15:07:33

字體：大中小

來源：轉載

供稿：網友

 1 <!DOCTYPE html> 2 <html> 3   <head> 4     <META http-equiv=Content-Type content="text/html; charset=utf-8"> 5     <title>Handlebars.js循環中索引(@index)使用技巧 - by 楊元</title> 6   </head> 7   <body> 8     <h1>Handlebars.js循環中索引(@index)使用技巧</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     <script type="text/Javascript" src="script/handlebars-v1.3.0.js"></script>27     28     <!--Handlebars.js模版-->29     <!--Handlebars.js模版放在script標簽中，保留了html原有層次結構,模版中要寫一些操作語句-->30     <!--id可以用來唯一確定一個模版,type是模版固定的寫法-->31     <script id="table-template" type="text/x-handlebars-template">32       {{#each this}}33         <tr>34           <td>{{@index}}.</td>35           <td>{{name}}</td>36           <td>{{sex}}</td>37           <td>{{age}}</td>38         </tr>39       {{/each}}40     </script>41     42     <!--進行數據處理、html構造-->43     <script type="text/javascript">44       var data = [{45         name: "張三",46         sex: "男",47         age: 3548       },{49         name: "李四",50         sex: "男",51         age: 2352       },{53         name: "甜妞",54         sex: "女",55         age: 1856       }];57       58       //解析模版59       var handle = Handlebars.compile($("#table-template").html());60       //生成html61       var html = handle(data);62       //插入到頁面63       $("#tableList").append(html);64       65     </script>66   </body>67 </html>
      雖然用{{@index}}可以獲取到索引，但遺憾的是，索引是從0開始的。。。這樣讓人看起來很不舒服。因此，我們可以使用一個Helper來讓索引+1，變成從1開始。
 1 <!DOCTYPE html> 2 <html> 3   <head> 4     <META http-equiv=Content-Type content="text/html; charset=utf-8"> 5     <title>Handlebars.js循環中索引(@index)使用技巧 - by 楊元</title> 6   </head> 7   <body> 8     <h1>Handlebars.js循環中索引(@index)使用技巧</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     <script type="text/javascript" src="script/handlebars-v1.3.0.js"></script>27     28     <!--Handlebars.js模版-->29     <!--Handlebars.js模版放在script標簽中，保留了html原有層次結構,模版中要寫一些操作語句-->30     <!--id可以用來唯一確定一個模版,type是模版固定的寫法-->31     <script id="table-template" type="text/x-handlebars-template">32       {{#each this}}33         <tr>34           <td>{{addOne @index}}.</td>35           <td>{{name}}</td>36           <td>{{sex}}</td>37           <td>{{age}}</td>38         </tr>39       {{/each}}40     </script>41     42     <!--進行數據處理、html構造-->43     <script type="text/javascript">44       var data = [{45         name: "張三",46         sex: "男",47         age: 3548       },{49         name: "李四",50         sex: "男",51         age: 2352       },{53         name: "甜妞",54         sex: "女",55         age: 1856       }];57       58       //注冊索引+1的helper59       var handleHelper = Handlebars.registerHelper("addOne",function(index){60         //返回+1之后的結果61         return index+1;62       });63       //解析模版64       var handle = Handlebars.compile($("#table-template").html());65       //生成html66       var html = handle(data);67       //插入到頁面68       $("#tableList").append(html);69       70     </script>71   </body>72 </html> 
      不要以為這就完事了，這只是一般情況，小菜還要介紹一個非常特殊的場景。
      假如循環中套了一個循環，在內層循環中如何獲取外層循環的索引呢？
      我們已經知道，可以用類似{{../name}}這種語法訪問父級循環中的屬性，但是這樣訪問父級索引是不可以的，例如：{{../@index}}，這樣寫是不正確的。
      我們可以通過一個小手段來獲取。
      寫例子之前，小菜多廢話幾句，其實這個非常實用，可以創建分級的索引，比如1.1、1.2等，也可以用作特殊的標識，理解成分組。
  1 <!DOCTYPE html>  2 <html>  3   <head>  4     <META http-equiv=Content-Type content="text/html; charset=utf-8">  5     <title>Handlebars.js循環中索引(@index)使用技巧 - by 楊元</title>  6   </head>  7   <body>  8     <h1>Handlebars.js循環中索引(@index)使用技巧</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     <script type="text/javascript" src="script/handlebars-v1.3.0.js"></script> 27      28     <!--Handlebars.js模版--> 29     <!--Handlebars.js模版放在script標簽中，保留了html原有層次結構,模版中要寫一些操作語句--> 30     <!--id可以用來唯一確定一個模版,type是模版固定的寫法--> 31     <script id="table-template" type="text/x-handlebars-template"> 32       {{#each this}} 33         <tr> 34           <td>{{addOne @index}}</td> 35           <td>{{name}}</td> 36           <td>{{sex}}</td> 37           <td>{{age}}</td> 38         </tr> 39         {{#each family}} 40           <tr> 41             <td>{{../_index}}.{{@index}}</td> 42             <td>{{name}}</td> 43             <td>{{sex}}</td> 44             <td>{{age}}</td> 45           </tr> 46         {{/each}} 47       {{/each}} 48     </script> 49      50     <!--進行數據處理、html構造--> 51     <script type="text/javascript"> 52       var data = [{ 53         name: "張三", 54         sex: "男", 55         age: 35, 56         family: [{ 57           name: "張三兒子", 58           sex: "男", 59           age: 10, 60         },{ 61           name: "張三妻子", 62           sex: "女", 63           age: 33, 64         }] 65       },{ 66         name: "李四", 67         sex: "男", 68         age: 23, 69         family: [{ 70           name: "李四妻子", 71           sex: "女", 72           age: 23, 73         }] 74       },{ 75         name: "甜妞", 76         sex: "女", 77         age: 18, 78         family: [{ 79           name: "甜妞媽媽", 80           sex: "女", 81           age: 40, 82         },{ 83           name: "甜妞爸爸", 84           sex: "男", 85           age: 43, 86         },{ 87           name: "甜妞姥爺", 88           sex: "男", 89           age: 73, 90         }] 91       }]; 92        93       //注冊索引+1的helper 94       var handleHelper = Handlebars.registerHelper("addOne",function(index){ 95         //利用+1的時機，在父級循環對象中添加一個_index屬性，用來保存父級每次循環的索引 96         this._index = index+1; 97         //返回+1之后的結果 98         return this._index; 99       });100       //解析模版101       var handle = Handlebars.compile($("#table-template").html());102       //生成html103       var html = handle(data);104       //插入到頁面105       $("#tableList").append(html);106       107     </script>108   </body>109 </html>
      分享到此結束~~~祝讀者學習愉快~~
 
 
 
作者：楊元歡迎任何形式的轉載，但請務必注明出處。