<!DOCTYPE html>

 <html>

   <head>

     <META http-equiv=Content-Type content="text/html; charset=utf-8">

     <title>each嵌套 - by 杨元</title>

   </head>

   <body>

     <h1>each嵌套</h1>

     <!--基础html框架-->

     <div id="dataList"></div>

     <!--插件引用-->

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

     <script type="text/javascript" src="script/handlebars-1.0.0.beta.6.js"></script>

     <!--Handlebars.js模版-->

     <!--Handlebars.js模版放在script标签中，保留了html原有层次结构,模版中要写一些操作语句-->

     <!--id可以用来唯一确定一个模版,type是模版固定的写法-->

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

       {{#each this}}

         {{#each info}}

           {{../name}}的{{this}}<br>

         {{/each}}

       {{/each}}

     </script>

     <!--进行数据处理、html构造-->

     <script type="text/javascript">

       $(document).ready(function() {

         //模拟的json对象

          var data = [{

                       "name":"张三",

                       "info":[

                         "眼睛",

                         "耳朵",

                         "鼻子"

                       ]

                     },{

                       "name":"李四",

                       "info":[

                         "爸爸",

                         "妈妈",

                         "妻子"

                       ]

                     }];

         //注册一个Handlebars模版，通过id找到某一个模版，获取模版的html框架

         //$("#table-template").html()是jquery的语法，不懂的童鞋请恶补。。。

         var myTemplate = Handlebars.compile($("#table-template").html());

         //将json对象用刚刚注册的Handlebars模版封装，得到最终的html，插入到基础table中。

         $('#dataList').html(myTemplate(data));

       });

     </script>

   </body>

 </html>

循环嵌套在稍微复杂点的页面设计中即会涉及，Handlebars.js完全支持each嵌套，可以在each中使用each。

上边的例子演示了两个关键点：each嵌套的可实现性、如何在each嵌套中读取父each中的数据。

例子很简单，info本身是一个信息列表，是属于某个人的，我们先用each遍历所有的人，然后再遍历每个人的info信息，这样就形成了each嵌套。但是我们想在内层each中获取外层each的数据，达到“谁的什么”这样的显示效果。

显然，如果直接在内层each中使用{{name}}，是取不到任何数据的，因为内层each的上下文是info，而name属性在表示人的上下文中。

此时，可以用{{../name}}从内层each获取上一级each的name属性，语法和html的路径表示一样，简单吧？

js模版引擎handlebars.js实用教程——each嵌套的更多相关文章

  1. js模版引擎handlebars.js实用教程

    js模版引擎handlebars.js实用教程 阅读本文需要了解基本的Handlebars.js概念,本文并不是Handlebars.js基础教程,而是注重于实际应用,为读者阐述使用过程中可能会遇到的 ...

  2. js模版引擎handlebars.js实用教程——为什么选择Handlebars.js

    返回目录 据小菜了解,对于java开发,涉及到页面展示时,比较主流的有两种解决方案: 1. struts2+vo+el表达式. 这种方式,重点不在于struts2,而是vo和el表达式,其基本思想是: ...

  3. js模版引擎handlebars.js实用教程——目录

    写在开头的话: 阅读本文需要了解基本的Handlebars.js概念,本文并不是Handlebars.js基础教程,而是注重于实际应用,为读者阐述使用过程中可能会遇到的一些问题. 实际上,小菜写这篇文 ...

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

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

  5. js模版引擎handlebars.js实用教程——each-循环中使用this

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

  6. js模版引擎handlebars.js实用教程——循环中使用索引

    <!DOCTYPE html> <html> <head> <META http-equiv=Content-Type content="text/ ...

  7. js模版引擎handlebars.js实用教程——with-进入到某个属性(进入到某个上下文环境)

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

  8. js模版引擎handlebars.js实用教程——with-终极this应用

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

  9. js模版引擎handlebars.js实用教程——if-判断的基本用法

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

随机推荐

  1. ibatis 参数错误，无效字符

    --- The error occurred in EmptyMapping.xml. --- The error occurred while applying a parameter map. - ...

  2. MongoDB基本管理命令

    MongoDB是一个NoSQL数据库系统:一个数据库可以包含多个集合(Collection),每个集合对应于关系数据库中的表:而每个集合中 可以存储一组由列标识的记录,列是可以自由定义的,非常灵活,由 ...

  3. Servlet知识

    1.Servlet概述 2.编写Servlet的开发步骤a.建立标准的JavaWeb应用目录FirstAppWEB-INFclasseslibweb.xmlb.编写一个类,实现javax.servle ...

  4. jsp中文件上床的enctype="multipart/form-data"用法

    jsp表单中必须要有enctype="multipart/form-data"才能文件上传的意思,是设置表单的MIME编码.默认情况,这个编码格式是application/x-ww ...

  5. 如何用Matlab将cell数据写入文件

    我们知道,一般的文件读写函数是不接受直接将cell内容(非数值)直接写入文件的, 例如:dlmwrite('o.txt', C, 'delimiter', '\t');%C 为cell类型数据,会报错 ...

  6. div 指令

    div 指令 div 是除法指令,后面跟的是除数,被除数默认在 ax, 或者 dx.ax 组成的存储单元中. 除数可以有 8 位和 16 位两种,存储于一个 reg 或内存单元中,也就是说不可以 di ...

  7. Jquery打造的类似新浪微博@提醒功能

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  8. css3动画之图片旋转

    直接上代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UT ...

  9. spring-aop学习

     SpringAOP学习 author:luojie 1.  AOP中的基本概念 AOP的通用术语,并非spring java所特有.很遗憾AOP的术语不是特别的直观.但如果让Spring java来 ...

  10. DWG2SHP DXF2SHP 如何把AutoCAD的DWG,DXF文件转换为Esri ArcGIS的Shape文件

    dwg是AutoCAD创立的一种图纸保存格式,已经成为二维CAD的标准格式,很多其他CAD为了兼容AutoCAD,也直接使用dwg作为默认工作文件. 地图shape文件由ESRI开发,一个ESRI的s ...