<!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. HTML 判断手机的类型（苹果手机安卓手机）

    function isJudege_PlatForm() { var version = navigator.appVersion; var platName = navigator.userAgen ...

  2. angular.js中插值语法和ng-bind以及ng-model的区别

    首先呢,插值语法也就是{{}}和ng-bind基本上是没有区别的. 主要区别在于,使用花括号语法时,在AngularJS使用数据替换模板中的花括号时,第一个加载的页面,通常是应用中的index.htm ...

  3. 在rails 4 中 使用 CSV 组件来 把csv文件导入到数据库

    class HardWorker include Sidekiq::Worker require 'CSV' def perform(file_path) csv_text = File.read(f ...

  4. 对button或radiobutton制作样式

    制作样式在drawable中进行 (cheakbox)在样式中点击变换图片,<selector> <item android:state_checked="true&quo ...

  5. 构建angular项目

    1. 安装yo与gulp bower $ npm install -g yo $ npm install -g gulp bower 2. 快速创建     $ npm install -g gene ...

  6. 浅析 IDE跟编译器

    之前听别人总说你用啥IDE,直接用编译器. 总的来说IDE包含编译器,而编译器仅仅是IDE的一部分, IDE包括编辑器与编译器. IDE: 可以在IDE上面编写代码,然后编译运行,有错误还能调试.比如 ...

  7. 用Java导出为excel表格

    导出的是最基础的excel表格,没有任何样式. <input type="button" value="输出到Excel" onclick='output ...

  8. SQL Server 2012安装后找不到服务器名称的解决办法！！！

    网上说使用localhost即可,确实没错,但是有的仍旧会报出无法找到错误,我在无法通过的时候又重新安装了SQLServer,这次选中全部默认安装,之前使用的是选择安装,然后发现多了几个配置,其中有一 ...

  9. 如何使用yum下载rpm包

    一.使用 yum-downloadonly 插件 参考文章:ghosTzone 的博客http://ghostm55.is-programmer.com/posts/6422.html yum是一个优 ...

  10. ASP.NET使用ConfigurationSection在Web.Config创建自定义配置节集合

    核心代码 using System; using System.Data; using System.Configuration; using System.Web; using System.Web ...