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. JavaScript RegExp 对象

    JavaScript RegExp 对象 RegExp 对象用于规定在文本中检索的内容. 什么是 RegExp? RegExp 是正则表达式的缩写. 当您检索某个文本时,可以使用一种模式来描述要检索的 ...

  2. 什么是UV?

    转自http://www.cnblogs.com/jenry/p/4083415.html 1.什么是UV?   对于三维模型,有两个最重要的坐标系统,一是顶点的位置(X,Y,Z)坐标,另一个就是UV ...

  3. HOLOTOOLKIT的使用

    Using HoloToolkit-Unity in Your Project Open or create your project in Unity. Assets -> Import Pa ...

  4. 转： vim 的编辑格式设置

    http://www.cnblogs.com/freewater/archive/2011/08/26/2154602.html :set encoding=utf-8:set fileencodin ...

  5. Oracle 中 decode 函数用法(转）

    含义解释: decode(条件,值1,返回值1,值2,返回值2,...值n,返回值n,缺省值) 该函数的含义如下: IF 条件=值1 THEN RETURN(翻译值1) ELSIF 条件=值2 THE ...

  6. 从零开始使用Jenkins来构建Docker容器(Ubuntu 14.04)

    当开发更新了代码,提交到Gitlab上,然后由测试人员触发Jenkins,于是一个应用的新版本就被构建了.听起来貌似很简单,duang~duang~duang,我用了是这样,你们用了也是这样,看起来这 ...

  7. tween.js

     简要教程 tween.js是一款可生成平滑动画效果的js动画库.相关的动画库插件还有:snabbt.js 强大的jQuery动画库插件和Tweene-超级强大的jQuery动画代理插件. tween ...

  8. Java System.getProperty()方法获取系统信息

    用 System.getProperty()方法能获取到的系统信息: java.version Java 运行时环境版本 java.vendor Java 运行时环境供应商 java.vendor.u ...

  9. PHP & Delphi 語法

    明 C(区分大小写) Delphi(不区分大小写) PHP(区分大小写) 整型变量的定义 1 2 3 4 5 6 7 char a = 'a';         /* 8位有符号*/ int a=10 ...

  10. QT QDateTime类、QTimer类

    QDateTime类,头文件#include <QDateTime> 可以使用QDateTime类来获得系统时间.通过QDateTime::currentDateTime()来获取本地系统 ...