<!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. ASP.NET ashx实现无刷新页面生成验证码

    现在大部分网站登陆时都会要求输入验证码,在网上也看了一些范例,现在总结一下如何实现无刷新页面生成验证码. 效果图: 实现方式: 前台: <div> <span>Identify ...

  2. runtime 运行机制2

    Mike_zh QQ:82643885 end: blogTitle 博客的标题和副标题 博客园 首页 新随笔 联系 订阅 <a id="MyLinks1_XMLLink" ...

  3. SQL数据库

    SQL是Structured Query Language(结构化查询语言)的缩写.SQL是专为数据库而建立的操作命令集,是一种功能齐全的数据库语言.在使用它时,只需要发出“做什么”的命令,“怎么做” ...

  4. 网站内容禁止复制和粘贴、另存为的js代码(转)

    1.使右键和复制失效 方法1: 在网页中加入以下代码: 代码如下: <script language="Javascript"> document.oncontextm ...

  5. 【转载】Java中的回车换行符/n /r /t

    source:http://hane00.blog.163.com/blog/static/1600615220126204446809/ '\r'是回车,'\n'是换行,前者使光标到行首,后者使光标 ...

  6. [django]用requests从url获取图片(数据类型是bytes)后如何在template中显示出来

    今天在做一个注册页面的时候遇到了一个验证码图片在页面显示的问题. 我用requests从一个url上获取到一张图片, 没有保存到本地, 而是想直接作为render的字典参数,传到页面里进行渲染.因为r ...

  7. 如何使用ajax将json传入后台数据

    首先采用jquery内部封装好的方法是比较简单的,我们只需做的就是修改里面的一些配置: 对$.ajax()的解析: $.ajax({ type: "POST", //提交方式 co ...

  8. js数组去重的三种方法

    <script type="text/javascript"> /*// 第一种冒泡法删除 var arr=[1,2,2,78,3,456,456]; for(var ...

  9. 如何在CentOS 5/6上安装EPEL 源

    EPEL 是什么? EPEL (Extra Packages for Enterprise Linux,企业版Linux的额外软件包) 是Fedora小组维护的一个软件仓库项目,为RHEL/CentO ...

  10. Spring 学习笔记 8. 尚硅谷_佟刚_Spring_使用外部属性文件

    1,配置数据源 (1)添加驱动 (2)编写spring配置文件 <bean id="dataSource" class="org.springframework.j ...