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. 读取中文目录(python)

    前言:需要对某目录下的文件进行分类,目录是中文名字就会报错,偶尔会手动修改文件名字,不太方便 解决办法:使用unicode()对路径进行处理 举例: 未进行处理前,该目录下的文件中文名称也是乱码显示的 ...

  2. c#数据绑定（3）——数据转化为信息

    文/嶽永鹏 本文主要在数据绑定1和2中新增了DataSet对象,练习了如何在DataSet中添加表.关系和约束,同时本文也简要的介绍了如何将数据转化为信息. 目标界面: XAML代码: <Gri ...

  3. 51nod 1622 集合对[算法马拉松19 C]

    题目链接:https://www.51nod.com/contest/problem.html#!problemId=1622 第一次参加算法马拉松,我就是去看大神们疯狂秒题,然后感受绝望的orz.. ...

  4. 转载：[AngularJS系列] 那伤不起的provider们啊~ (Provider, Value, Constant, Service, Factory, Decorator)

    来源:http://hellobug.github.io/blog/angularjs-providers/ 用AngularJS做项目,但凡用过什么service啊,factory啊,provide ...

  5. swift-分支语句

    // switch的基本用法 // 1>switch后面的()可以省略 // 2>case中语句结束后不需要跟break // 3>在case中定义局部变量不需要跟{} // 4&g ...

  6. background复合属性详解（上）：background-image

    background复合属性是个很复杂的属性,花样非常多,比较神奇的是css3 中支持多图片背景了,这篇文章先讲讲background-image属性,其他背景属性会在后续的文章综合总结. 一.最基本 ...

  7. 以软件周期C开发周期说明不同测试的使用情况

    我们所使用的测试方法有以下几种 功能测试 单元测试(使用场景:在编码阶段,每完成一段相对完整的代码块时,单元测试几乎贯穿整个编码过程) 黑盒测试(使用场景:在编码阶段,没完成一各相对独立的模块时,例如 ...

  8. PHP制作验证码

    session_start();$a = array('a','b','c','d','e','f','g','h','i','j','k','l','m','n','o','p','q','r',' ...

  9. Hibernate实体关系映射(OneToMany、ManyToOne双边)——完整实例

    双边关系是最常见的配置.在多方有一方的引用,一方也有多方的引用.双边关系能够很方便地查询数据.看一个班级与学生的双边关系. 班级(Clazz类)与学生(Student类):一对多关系.班级中有学生属性 ...

  10. 专家解读：BPM与OA的区别

    演进历程 传统OA 模块化架构,仅能满足管理执行的刚性效率,系统的专业化程度有限. BPM 平台化架构,管理要求精细化程度高,系统更专业化,更注重整合. BPM SAAS 基于云架构,跨组织社交化,系 ...