HandlBarz之this的基本使用

缺乏、安全感 2022-08-01 06:02 79阅读 0赞

<!DOCTYPE html>
    <html>
      <head>
        <META http-equiv=Content-Type content="text/html; charset=utf-8">
        <title>each-基本循环使用方法 - by Bruce</title>
      </head>
      <body>
        <h1>each-基本循环使用方法</h1>
        
        <table>
          <thead>
            <tr>
              <th>姓名</th>
              <th>性别</th>
              <th>年龄</th>
            </tr>
          </thead>
          <tbody id="tableList">
            
          </tbody>
        </table>
        
        
        <script type="text/javascript" src="js/jquery-2.0.3.min.js"></script>
        <script type="text/javascript" src="js/handlebars-v3.0.0.js"></script>
        
        
        
        
        <script id="table-template" type="text/x-handlebars-template">
          {
       {#each this}} 
            <tr>
              <td>{
       {name}}</td>
              <td>{
       {sex}}</td>
              <td>{
       {age}}</td>
            </tr> 
          {
       {/each}}
        </script>
        
        
        <script type="text/javascript">
          $(document).ready(function() {
            //模拟的json对象
            var data = [
                            {
                                "name": "张三",
                                "sex": "0",
                                "age": 18
                            },
                            {
                                "name": "李四",
                                "sex": "0",
                                "age": 22
                            },
                            {
                                "name": "夏守成",
                                "sex": "1",
                                "age": 18
                            }
                        ];
            
            //注册一个Handlebars模版，通过id找到某一个模版，获取模版的html框架
            //$("#table-template").html()是jquery的语法，不懂的童鞋请恶补。。。
            var myTemplate = Handlebars.compile($("#table-template").html());
            //将json对象用刚刚注册的Handlebars模版封装，得到最终的html，插入到基础table中。
            $('#tableList').html(myTemplate(data));
          });
        </script>
      </body>
    </html>

很多时候，我们拿到的json对象，本身就是一个list，并不是map，直接就可以遍历，不需要\#each student这样指定遍历某个属性。

此时可以用\#each this，表示遍历当前对象。

this表示当前上下文，非常灵活，以后还会提及，读者可以举一反三。

Demo下载地址：[点击下载链接][Link 1]

[Link 1]: http://download.csdn.net/detail/u013059555/8822287