jsrender中使用for循环数据时有时需要访问父级数据。

而jsrender在循环中的父级数据存放在隐藏属性parent.parent.data中，使用案例如下

 {{:#parent.parent.data}}

具体使用案例如：

<!DOCTYPE html>

<html>

  <head>

    <meta charset="utf-8">

    <title>嵌套循环使用#parent访问父级数据 --- by 杨元</title>

    <style>

    </style>

  </head>

  <body>

    <div>

      <table>

        <thead>

          <tr>

            <th width="10%">序号</th>

            <th width="10%">姓名</th>

            <th width="80%">家庭成员</th>

          </tr>

        </thead>

        <tbody id="list">

        </tbody>

      </table>

    </div>

    <script src="jquery.min.js"></script>

    <script src="jsviews.js"></script>

    <!-- 定义JsRender模版 -->

    <script id="testTmpl" type="text/x-jsrender">

      <tr>

        <td>{{:#index + 1}}</td>

        <td>{{:name}}</td>

        <td>

          {{for family}}

            {{!-- 利用#parent访问父级index --}}

            <b>{{:#parent.parent.index + 1}}.{{:#index + 1}}</b>

            {{!-- 利用#parent访问父级数据，父级数据保存在data属性中 --}}

            {{!-- #data相当于this --}}

            {{:#parent.parent.data.name}}的{{:#data}}

          {{/for}}

        </td>

      </tr>

    </script>

    <script>

      //数据源

      var dataSrouce = [{

        name: "张三",

        family: [

          "爸爸",

          "妈妈",

          "哥哥"

        ]

      },{

        name: "李四",

        family: [

          "爷爷",

          "奶奶",

          "叔叔"

        ]

      }];

      //渲染数据

      var html = $("#testTmpl").render(dataSrouce);

      $("#list").append(html);

    </script>

  </body>

</html>

jsrender-for循环中访问父属性的更多相关文章

  1. 在实体对象中访问导航属性里的属性值出现异常“There is already an open DataReader associated with this Command which must be closed first”

    在实体对象中访问导航属性里的属性值出现异常“There is already an open DataReader associated with this Command which must be ...

  2. JsRender实用教程(tag else使用、循环嵌套访问父级数据)

    前言 JsRender是一款基于jQuery的JavaScript模版引擎,它具有如下特点: ·  简单直观 ·  功能强大 ·  可扩展的 ·  快如闪电 这些特性看起来很厉害,但几乎每个模版引擎, ...

  3. iframe里访问父级里的方法属性

    window.parent.attributeName;  // 访问属性attributeName是在父级窗口的属性名 window.parent.Func();  // 访问属性Func()是在父 ...

  4. PHP 访问类中的静态属性

    静态属性和普通属性不一样,静态属性只属于类本身而不属于类的任何实例,所以他们的访问方式也不一样.你可以把静态属性认为是存储在类当中的全局变量,而且你可以在任何地方通过类来访问它们. 在类本身中访问静态 ...

  5. 在CG/HLSL中访问着色器属性（Properties）

    在CG/HLSL中访问着色器属性 Shader在Properties块中访问材质属性.如果你想在一个着色程序中访问一些属性,你需要声明一个Cg/HLSL具有相同的名称和一个匹配的类型的变量. Prop ...

  6. js获取iframe中的元素以及在iframe中获取父级的元素（包括iframe中不存在name和id的情况）

      第一种情况:iframe中不存在name和id的方法:(通过contentWindow获取) var iframe = document.getElementsByTagName('iframe' ...

  7. python中的类属性和实例属性

    属性就是属于一个对象的数据或者函数,我们可以通过句点(.)来访问属性,同时 Python 还支持在运作中添加和修改属性. 我们先来看看类里面的普通字段: class Test(object): nam ...

  8. 23.python中的类属性和实例属性

    在上篇的时候,我们知道了:属性就是属于一个对象的数据或者函数,我们可以通过句点(.)来访问属性,同时 python 还支持在运作中添加和修改属性. 而数据变量,类似于: name = 'scolia' ...

  9. Handlebars.js循环中索引(@index)使用技巧(访问父级索引)

    使用Handlebars.js过程中,难免会使用循环,比如构造数据表格.而使用循环,又经常会用到索引,也就是获取当前循环到第几次了,一般会以这个为序号显示在页面上. Handlebars.js中获取循 ...

随机推荐

  1. SecurityError Error 2148 SWF 不能访问本地资源

    错误提示: SWF 文件不能被本地访问 不能访问本地 只有仅限于文件系统的 SWF 文件和可信的本地 SWF 文件可以访问本地资源 错误信息: SecurityError: Error #2148: ...

  2. java 27 - 2 反射之 反射的概述以及获取Class文件对象的方式

    反射: JAVA语言的反射机制: JAVA反射机制是在运行状态中,对于任意一个类,都能够知道这个类的所有属性和方法: 对于任意一个对象,都能够调用它的任意一个方法和属性: 这种动态获取的信息以及动态调 ...

  3. 蓝灯github地址

    https://github.com/getlantern/lantern/ 闪电联盟蓝灯: http://bbs.sdbeta.com/read-htm-tid-556664.html

  4. 关于MyBatis mapper的insert, update, delete返回值

    这里做了比较清晰的解释: http://mybatis.github.io/mybatis-3/java-api.html SqlSession As mentioned above, the Sql ...

  5. js读取解析JSON类型数据（转）

    谢谢博主,转自http://blog.csdn.net/beyond0851/article/details/9285771 一.什么是JSON? JSON(JavaScript Object Not ...

  6. jboss EAP 6.2 + Message Drive Bean(MDB) 整合IBM Webshpere MQ 7.5

    上一篇我们知道了消息驱动Bean的基本用法,实际大型分布式企业应用中,往往会采用高性能的商业Queue产品,比如IBM Webshpere MQ(目前最新版本是7.5 ),下面讲解下如何在Jboss ...

  7. 在GoF设计模式

    在GoF设计模式中,结构型模式有: 1.适配器模式 Adapter   适配器模式是将一个类的接口转换成客户希望的另外一个接口.适配器模式使得原本由于接口不兼容而不能一起工作的那些类可以一起工作.   ...

  8. (一)GATT Profile和GAP 简介（目前所有的BLE应用都基于GATT，所以也要了解是怎么一回事）－转发

    个人大总结:(先后顺序) 1.GAP协议定义多个角色(其中就有中心设备［GATT客户端］(唯一)叫主设备||和外围设备［GATT服务端端］(多个)也叫从设备). 2.先经过GAP协议,再有GATT协议 ...

  9. centos7 安装nginx和php5.6.25遇到 无法访问php页面 报错file not found 问题解决

    php-fpm安装完成,nginx安装完成 netstap -ntl| 发下端口正常开启 iptables -L 返现9000端口已经开放 ps -aux|grep nginx 发下nginx进程正常 ...

  10. ALinq Dynamic 使用指南——代码的获取与编译

    1.下载代码 ALinq Dynamic 项目托管在 CodePlex 网站,你可以使用浏览器下载压缩包,或者通过 SVN 获取. 项目网址:http://esql.codeplex.com/ 压缩包 ...