handlebars，each循环里面套each循环

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

html代码

 !DOCTYPE html>

 <html>

   <head>

     <meta charset="utf-8">

     <title>handlebars循环套循环</title>

     <style media="screen">

       *{

         margin: 0;

         padding: 0;

         list-style: none;

       }

       .time{

         float:left;

         width:100px;

       }

       .content{

         float:left;

         border-left:1px solid black;

         width: 100px;

         padding-left: 20px;

         padding-bottom: 10px;

       }

       #dataList li{

         clear: both;

       }

     </style>

   </head>

   <body>

     <div>

       <ul id="dataList">

       </ul>

     </div>

     <!-- 引入jquery、handlebars的JS文件 -->

     <script type="text/javascript" src="../js/jquery-1.8.3.min.js"></script>

     <script type="text/javascript" src="../js/handlebars.min.js"></script>

     <!-- 创建一个script标签，把type属性改为：text/x-handlebars-template -->

     <script id="table-template" type="text/x-handlebars-template">

       <!-- 把data的数据进行循环 -->

       {{#each data}}

         <li>

           <div class="time">

             <p>{{name}}</p>

           </div>

           <div class="content">

             <!-- 把data:info里面的数据再次进行循环 -->

             {{#each info}}

             <!-- info里面多个数据，所以这里可以直接连续打印多个this -->

             <p>{{this}}</p>

             {{/each}}

           </div>

         </li>

        {{/each}}

   </script>

   <script type="text/javascript" src="./index.js"></script>

   </body>

 </html>

index.js代码：

 // JSON数据

 var data = [

   {

      "name":"张三",

      "info":[

        "眼睛",

        "耳朵",

        "鼻子"

      ]

    },{

     "name":"李四",

      "info":[

        "眼睛",

        "耳朵",

        "鼻子"

     ]

  }];

  // 封装一个函数，传进去三个值（填充的内容（script标签的id），（需要填充位置的id），（数据））

  var fillTemplate = function(templateObj,contentObj,fillData){

     var templateHtml = templateObj.html();

     var template = Handlebars.compile(templateHtml);

     contentObj.html(template(fillData));

 };

  fillTemplate($("#table-template"),$("#dataList"),{data:data});

巴特西

handlebars，each循环里面套each循环

最新文章

热门文章