06-循環中使用索引

2024-04-27 15:07:32

字體：大中小

來源：轉載

供稿：網友

 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": 1853                           },54                           {55                               "name": "李四",56                               "sex": "0",57                               "age": 2258                           },59                           {60                               "name": "妞妞",61                               "sex": "1",62                               "age": 1963                           }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。
 
 
 
作者：楊元歡迎任何形式的轉載，但請務必注明出處。