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. 关于SQLite的伪随机数

    --random() 的返回值范围是:[-2^63,(2^63)-1],而通常要的是最小为 0的随机数,于是就不能直接用了,解决办法: then col else -col end) result f ...

  2. Fibonacci(斐波那契数列)的最佳实践方式(JavaScript)

    1)低级版本 var fibonacci = function(n) { if (n == 0 || n == 1) { return n; } else { return fibonacci(n - ...

  3. java selenium (二) 环境搭建方法一

    webdriver 就是selenium 2.    webdriver 是一款优秀的,开源的,自动化测试框架. 支持很多语言.  本文描述的是用java Eclipse 如何搭建环境 阅读目录   ...

  4. F2工作流引擎之-纯JS Web在线可拖拽的流程设计器（八）

          Web纯JS流程设计器无需编程,完全是通过鼠标拖.拉.拽的方式来完成,支持串行.并行.分支.异或分支.M取N路分支.会签.聚合.多重聚合.退回.传阅.转交,都可以非常方便快捷地实现,管理员 ...

  5. C# 4.0 新特性dynamic (待学习)

    随便翻看了一下dynamic,在网上拷贝了一个例子,先贴出来等有空了再慢慢消化 static void Main(string[] args) { dynamic d = new MyDynamicO ...

  6. VS 2015 localhost访问有效 改用 IP访问 400错误 invalid hostname 修改方法

    今天新起站点发现在Chrome浏览器中,通过localhost访问是有效的,但是通过本机IP甚至127.0.0.1访问无效, 报的错误是400 Bad Request Invalid HostName ...

  7. iOS开发_内存泄漏、内存溢出和野指针之间的区别

    今天,在工作群中,被问到了内存泄漏和野指针指向的区别,自己答的不是很好,特意回来查了资料,在博文中总结一下经验,欢迎指正. 内存泄漏:是指在堆区,alloc 或new 创建了一个对象,但是并没有放到自 ...

  8. hammer.js实现背景图手势缩放调整位置

    <!DOCTYPE html> <html> <head> <script> function getxy(e){ var a=new Array() ...

  9. PHP是什么

    php 是一种服务器端的,嵌入html的脚本语言.php区别其他像客户端java的地方是它的代码在服务器端执行.php能做什么? 最低水平,php可以做任何其他cgi程序所能做的事,例如收集表格数据, ...

  10. 第一篇:Retrofit主要类UML图

    2016-05-06 16:07:09 1.先上一张Retrofit的代码结构图: 可以看到,Retrofit自身的结构很简单,代码量也不是很大.红色框部分是一些注解类,就是一些标记. 简单的看一下客 ...