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. SQL连接查询

    连接查询:通过连接运算符可以实现多个表查询.连接是关系数据库模型的主要特点,也是它区别于其它类型数据库管理系统的一个标志. 常用的两个链接运算符: 1.join   on 2.union 在关系数据库 ...

  2. PHP的文件操作常用函数

    PHP文件操作 1 获得文件名:basename - 返回路径中的文件名部分 给出一个包含有指向一个文件的全路径的字符串,本函数返回基本的文件名.如果文件名是以 suffix 结束的,那这一部分也会被 ...

  3. ubuntu下crontab编辑方法的设定

    在ubuntu下,首次编辑crontab计划任务的时候,会提示让选择编辑器.由于对nano编辑器不是很熟悉,若是选择nova编辑的话,会有些麻烦.可以重置编辑器,方法如下:[root@wang ~]# ...

  4. linux负载均衡总结性说明（四层负载/七层负载）

    在常规运维工作中,经常会运用到负载均衡服务.负载均衡分为四层负载和七层负载,那么这两者之间有什么不同?废话不多说,详解如下: 一,什么是负载均衡1)负载均衡(Load Balance)建立在现有网络结 ...

  5. 编译php-5.6出错，xml2-config not found

    今天在centos上编译PHP-5.6 cd php-5.6 ./configure --prefix=/usr/local/php5./ --with-apxs2=/usr/local/apache ...

  6. Linux shell文本过滤

    正则表达式 --概念:一种用来描述文本模式的特殊语法 --由普通字符(例如:字符a到z),以及特殊字符(元字符,如/*?等)组成匹配的字符串 --文本过滤工具在某种模式之下,都支持正则表达式 --基本 ...

  7. Java的性能优化

    http://www.toutiao.com/i6368345864624144897/?tt_from=mobile_qq&utm_campaign=client_share&app ...

  8. Linux学期总结

    学习笔记链接 第一次 http://www.cnblogs.com/Spr1ngxx/p/4823573.html 第二次 http://www.cnblogs.com/Spr1ngxx/p/4842 ...

  9. iptables/Netfilter 学习

    开始学iptables,因为它是和路由器技术紧密结合在一起的. iptables的命令看起来眼花缭乱,随便找两个: iptables -A FORWARD -p tcp -s -d -j ACCEPT ...

  10. Oracle 常用操作【01】修改、更新数据

    1. oracle 修改表名.列名.字段类型.添加表列.删除表列  alert table scott.test rename to test1--修改表名 alter table scott.tes ...