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循环的更多相关文章

  1. php 循环里面套sql怎么解决

    功能要求: 企业列表(展示企业的基本信息,这里只获取了名称.logo.和服务类型), 服务类型说明: 服务类型一共3级,1.2级是必填的,3级是非必填,如果填的话最多3个, 服务类型1.2.3保存在一 ...

  2. for循环里使用查询如何优化（代码库）

    for循环里的查询,只是为了赋值对象中的一个字段,如果每一个都重新查一下数据库,影响效率 应该先进行查询,然后再循环里组装自己需要的业务数据 如下代码:list1 查询出对象的一部分内容,list2 ...

  3. js模版引擎handlebars.js实用教程——each-基本循环使用方法

    返回目录 <!DOCTYPE html> <html> <head> <META http-equiv=Content-Type content=" ...

  4. foreach循环里不能remove/add元素的原理

    foreach循环 ​    foreach循环(Foreach loop)是计算机编程语言中的一种控制流程语句,通常用来循环遍历数组或集合中的元素.Java语言从JDK 1.5.0开始引入forea ...

  5. 不要在 foreach 循环里进行元素的 remove/add 操作。remove 元素请使用 Iterator 方式，如果并发操作，需要对 Iterator 对象加锁

    不要在 foreach 循环里进行元素的 remove/add 操作.remove 元素请使用 Iterator 方式,如果并发操作,需要对 Iterator 对象加锁. 正例: Iterator&l ...

  6. 【vue】vue使用Element组件时v-for循环里的表单项验证方法

    转载至:https://www.jb51.net/article/142750.htm标题描述看起来有些复杂,有vue,Element,又有表单验证,还有v-for循环?是不是有点乱?不过我相信开发中 ...

  7. qt——for循环里创建widget

    在for循环里创建 widget,比如test类 不能使用 test t; 而要使用 test t = new test(): for (i=0;i<=3;i++) { QPushButton* ...

  8. for循环里面的break;和continue;语句

    for循环里面的break;和continue;语句 break语句 哇,我已经找到我要的答案了,我不需要进行更多的循环了! 比如,寻找第一个能被5整除的数: for循环中,如果遇见了break语句, ...

  9. js循环里进行回调，引用循环里的变量，发现只是最后值的问题

    做项目的时候,栽在一个小地方,是这样的 我有很多个坐标点,我想把这些坐标点都绑定一个事件,当点击了这个坐标点之后,发送一个ajax 请求,将坐标点的id 发出去,等待显示返回的数据 但是实际当中,无论 ...

随机推荐

  1. SPSS数据分析—主成分分析

    我们在分析问题的时候,为了准确全面的反映问题,常常收集很多变量,这些变量之间往往具有相关性,导致存在大量的重复信息,直接使用的话,不但模型非常复杂,而且所引起的共线性问题会使模型准确度降低. 对此,我 ...

  2. tensorflow版的bvlc模型

    研究相关的图片分类,偶然看到bvlc模型,但是没有tensorflow版本的,所以将caffe版本的改成了tensorflow的: 关于模型这个图: 下面贴出通用模板: from __future__ ...

  3. 为了防止采集，把文章中出现的URL链接随机大小写(PHP实现)

    <?php $string = "http://www.kxblogs.com/n/20161115/74439155.html"; $string = explode('/ ...

  4. applicationContext配置文件中的属性说明

    lazy-init:设置只对scop属性为singleton的bean起作用. 1.true:延迟加载:这时在第一次向容器通过getBean索取bean时实例化的. 2.false:表示spring启 ...

  5. WinForm 公共控件

    一.窗体属性: 1.AcceptButton - 窗体的“接受”按钮.如果设置该属性,每次用户按“Enter”键都相当于“单击”了该按钮. 需要设置哪个键,就在后面选择. 2.CancelButton ...

  6. Zadig - USB driver installation made easy

    http://zadig.akeo.ie/

  7. Atom使用到的插件

    atom-beautify atom-css-class-checker atom-css-comb atom-css-unit-converter atom-csscomb atom-csslint ...

  8. OC语言中BOOL 和 bool 区别

    1.类型不同 BOOL为int型: bool为布尔型: 2.长度不同 bool只有一个字节: BOOL长度视实际环境来定,一般可认为是4个字节: 3.取值不同 bool取值false和true,是0和 ...

  9. ssh框架文件上传下载

    <!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  10. HPL/SQL与CDH5.4.7集成

    1.下载hplsql-0.3.13到本地并解压 2.修改plsql,为如下内容 #!/bin/bash export "HADOOP_CLASSPATH=/opt/cloudera/parc ...