使用jQuery+huandlebars循環中索引(@index)使用技巧(訪問父級索引)

時間 2020-07-07

標籤使用 jquery+huandlebars jquery huandlebars 循環索引 index 技巧訪問欄目 JQuery 简体版

原文原文鏈接

兼容ie8（很實用，複製過來，僅供技術參考，更詳細內容請看源地址：http://www.cnblogs.com/iyangyuan/archive/2013/12/12/3471227.html）javascript

<!DOCTYPE html>
<html>
  <head>
    <META http-equiv=Content-Type content="text/html; charset=utf-8">
    <title>Handlebars.js循環中索引(@index)使用技巧 - by 楊元</title>
  </head>
  <body>
    <h1>Handlebars.js循環中索引(@index)使用技巧</h1>
    <!--基礎html框架-->
    <table>
      <thead>
        <tr>
          <th></th>
          <th>姓名</th>
          <th>性別</th>
          <th>年齡</th>
        </tr>
      </thead>
      <tbody id="tableList">
        
      </tbody>
    </table>
    
    <!--插件引用-->
    <script type="text/javascript" src="script/jquery.js"></script>
    <script type="text/javascript" src="script/handlebars-v1.3.0.js"></script>
    
    <!--Handlebars.js模版-->
    <!--Handlebars.js模版放在script標籤中，保留了html原有層次結構,模版中要寫一些操做語句-->
    <!--id能夠用來惟一肯定一個模版,type是模版固定的寫法-->
    <script id="table-template" type="text/x-handlebars-template">
      {{#each this}}
        <tr>
          <td>{{addOne @index}}</td>
          <td>{{name}}</td>
          <td>{{sex}}</td>
          <td>{{age}}</td>
        </tr>
        {{#each family}}
          <tr>
            <td>{{../_index}}.{{@index}}</td>
            <td>{{name}}</td>
            <td>{{sex}}</td>
            <td>{{age}}</td>
          </tr>
        {{/each}}
      {{/each}}
    </script>
    
    <!--進行數據處理、html構造-->
    <script type="text/javascript">
      var data = [{
        name: "張三",
        sex: "男",
        age: 35,
        family: [{
          name: "張三兒子",
          sex: "男",
          age: 10,
        },{
          name: "張三妻子",
          sex: "女",
          age: 33,
        }]
      },{
        name: "李四",
        sex: "男",
        age: 23,
        family: [{
          name: "李四妻子",
          sex: "女",
          age: 23,
        }]
      },{
        name: "甜妞",
        sex: "女",
        age: 18,
        family: [{
          name: "甜妞媽媽",
          sex: "女",
          age: 40,
        },{
          name: "甜妞爸爸",
          sex: "男",
          age: 43,
        },{
          name: "甜妞姥爺",
          sex: "男",
          age: 73,
        }]
      }];
      
      //註冊索引+1的helper
      var handleHelper = Handlebars.registerHelper("addOne",function(index){
        //利用+1的時機，在父級循環對象中添加一個_index屬性，用來保存父級每次循環的索引
        this._index = index+1;
        //返回+1以後的結果
        return this._index;
      });
      //解析模版
      var handle = Handlebars.compile($("#table-template").html());
      //生成html
      var html = handle(data);
      //插入到頁面
      $("#tableList").append(html);
      
    </script>
  </body>
</html>