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. 【WebGoat习题解析】Parameter Tampering->Bypass HTML Field Restrictions

    The form below uses HTML form field restrictions. In order to pass this lesson, submit the form with ...

  2. A flash of Joy

    import re from datetime import timedelta from tornado import httpclient, gen, ioloop, queues peoples ...

  3. wmware 怎么 跟主机相互通信

    VMnet1和VMware8其实就是软件模拟出来的两块网卡提供DHCP服务,两块网卡对应VMware的两种不同的模式VMWare提供了三种工作模式,它们是bridged(桥接模式).NAT(网络地址转 ...

  4. Mina的ProtocolEncoderOutput之坑

    这个问题是之前测试上万个连接的pingpong发现的,调了很久,但当时急着做其他事,就没有详细记录下来,现在回想起来也有点记不清具体哪儿了. 表现是在测试上万个连接的pingpong时会出现服务器挂起 ...

  5. CSS中加号、星号及其他符号的作用

    在理想世界里,正确的CSS应该在任何支持CSS的浏览器里工作良好.不幸的是, 我们并不是生活在理想的世界里,浏览 器们布满了BUG和不一致.创建一个跨浏览器并且显示一致的页面,CSS开发者必须想尽办法 ...

  6. VRML开发环境配置

    Vrml真的是个好老的语言啊~~~~ 1. 安装xp虚拟机 vm已经安装过.现在安装xp系统. 发现个网站,msdn itellyou,这里能够下载很多不同的操作系统,都是纯净版的. 选择xp系统:h ...

  7. MVC5+EF6 入门完整教程七

    本篇我们针对表格显示添加一些新功能. 前面我们已经讲解过表格显示数据了,现在我们添加三个常用功能: 对显示结果进行排序.过滤.分页. 文章提纲 理论基础/前置准备 详细步骤 总结 前置准备 – 应用之 ...

  8. JVM 虚拟机 内存说明

    Java虚拟机所管理的内存图: 1程序计数器: 该模块作用是记录线程执行字节码的位置,记录程序执行状态,以便该线程下次获得CPU时继续执行.程序里的每个线程程序计数器相互独立,互不影响,该内存区也称“ ...

  9. linux设备模型

    device_driver和device必须依附总线.总线.驱动.设备最终会落实为sysfs中的一个目录.kobject对应sysfs的一个目录. attribute直接落实sysfs中的一个文件,如 ...

  10. bzoj3600: 没有人的算术

    题意:太难说了..手动去看吧反正不是权限题. 膜拜VFK大爷的神题! 其实一开始思路挺清楚的,如果我们能做到用一个实数去代表"数",这就是裸的动态区间最值查询. 关键是怎么用实数去 ...