<!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. 即时通讯 TCP UDP

    TCP协议与UDP协议的区别    首先咱们弄清楚,TCP协议和UCP协议与TCP/IP协议的联系,很多人犯糊涂了,一直都是说TCP/IP协议与UDP协议的区别,我觉得这是没有从本质上弄清楚网络通信! ...

  2. Maven 整合 spring profile实现多环境自动切换

    Maven 整合 spring profile实现多环境自动切换 时间:2014-03-19 15:32来源:Internet 作者:Internet 点击:525次 profile主要用在项目多环境 ...

  3. R语言读取excel文件的3种方法

    R读取excel文件中数据的方法: 电脑有一个excel文件,原始的文件路径是:E:\R workshop\mydata\biom excel数据为5乘2阶矩阵,元素为                ...

  4. 【Java学习笔记】函数的可变参数

    package p2; public class ParamterDemo { public static void main(String[] args) { int sum1 = add(4,5) ...

  5. CAD二次开发

    用C#有一段时间了,由于单位需要,开始接触CAD二次开发,网上一搜,加入CAD开发的群,零零碎碎看了一些文章和博客,没有系统地的知识,能解决一些小问题.最近开始系统学习,再次推荐两本书,一本事纸质版的 ...

  6. 关于.NET大数据量大并发量的数据连接池管理

    转自:http://www.cnblogs.com/virusswb/archive/2010/01/08/1642055.html 我以前对.NET连接池的认识是错误的,原来以为在web.confi ...

  7. Python生成器的经典程序

    import random def get_data(): """返回0到9之间的3个随机数""" return random.sample ...

  8. 测试文档锁：doc.LockDocument()

    /// <summary> /// 总结:用到DocumentManager.Open(filePath)时,如果是ForWrite,就需要用到lock文档锁. /// </summ ...

  9. bdb log file 预设长度的性能优化

    看代码随手记:log_put.c, __log_write() /* * If we're writing the first block in a log file on a filesystem ...

  10. java基础3_流程控制语句

    一 条件判断 1. 条件运算符(三元表达式) ,其形式为: type d = a ? b : c; 具体化形式为:int d = 2 < 1 ? 3 : 4; 2. 轻量级的文本编辑器:Ultr ...