zoukankan      html  css  js  c++  java
  • handlebars,each循环里面套each循环

    handlebars可以用each自动进行循环,下面介绍一下each循环里面套循环来着。

    html代码

     1 !DOCTYPE html>
     2 <html>
     3   <head>
     4     <meta charset="utf-8">
     5     <title>handlebars循环套循环</title>
     6     <style media="screen">
     7       *{
     8         margin: 0;
     9         padding: 0;
    10         list-style: none;
    11       }
    12       .time{
    13         float:left;
    14         width:100px;
    15       }
    16       .content{
    17         float:left;
    18         border-left:1px solid black;
    19         width: 100px;
    20         padding-left: 20px;
    21         padding-bottom: 10px;
    22       }
    23       #dataList li{
    24         clear: both;
    25       }
    26     </style>
    27   </head>
    28 
    29   <body>
    30     <div>
    31       <ul id="dataList">
    32 
    33       </ul>
    34     </div>
    35     <!-- 引入jquery、handlebars的JS文件 -->
    36     <script type="text/javascript" src="../js/jquery-1.8.3.min.js"></script>
    37     <script type="text/javascript" src="../js/handlebars.min.js"></script>
    38     <!-- 创建一个script标签,把type属性改为:text/x-handlebars-template -->
    39     <script id="table-template" type="text/x-handlebars-template">
    40       <!-- 把data的数据进行循环 -->
    41       {{#each data}}
    42         <li>
    43           <div class="time">
    44             <p>{{name}}</p>
    45           </div>
    46           <div class="content">
    47             <!-- 把data:info里面的数据再次进行循环 -->
    48             {{#each info}}
    49             <!-- info里面多个数据,所以这里可以直接连续打印多个this -->
    50             <p>{{this}}</p>
    51             {{/each}}
    52           </div>
    53         </li>
    54        {{/each}}
    55   </script>
    56 
    57   <script type="text/javascript" src="./index.js"></script>
    58 
    59   </body>
    60 </html>

    index.js代码:

     1 // JSON数据
     2 var data = [
     3   {
     4      "name":"张三",
     5      "info":[
     6        "眼睛",
     7        "耳朵",
     8        "鼻子"
     9      ]
    10    },{
    11     "name":"李四",
    12      "info":[
    13        "眼睛",
    14        "耳朵",
    15        "鼻子"
    16     ]
    17  }];
    18 
    19  // 封装一个函数,传进去三个值(填充的内容(script标签的id),(需要填充位置的id),(数据))
    20  var fillTemplate = function(templateObj,contentObj,fillData){
    21     var templateHtml = templateObj.html();
    22     var template = Handlebars.compile(templateHtml);
    23     contentObj.html(template(fillData));
    24 };
    25 
    26  fillTemplate($("#table-template"),$("#dataList"),{data:data});
  • 相关阅读:
    python03-if
    python03
    基础知识梳理
    开篇话
    托管代码---> CLR --> 自宿主
    反射定义及基础案例
    c# 中委托的发展
    委托代码案例
    委托(实例)
    字节(Byte) 与 位(bit)
  • 原文地址:https://www.cnblogs.com/liuyunqi/p/6033556.html
Copyright © 2011-2022 走看看