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. 安装VS2013，可是电脑C盘没空间了，今天早上整理了下

    安装VS2013,可是电脑C盘没空间了,今天早上整理了下 安装VS2013,要求C盘有11G的空闲空间,不然不让装, 咋天下好了安装文件,6.89G 今天早上一来, 首先把 一些软件删掉,装到了D盘, ...

  2. Eclipse linux tools 插件

    !. eclipse linux tools. http://www.eclipse.org/linuxtools/projectPages/libhover/ 2. install new soft ...

  3. poj[2392]space elevator

    Description The cows are going to space! They plan to achieve orbit by building a sort of space elev ...

  4. 一个简单的Android富文本TextView实现

    p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 24.0px Helvetica; color: #555555 } p.p2 { margin: 0.0p ...

  5. MVC code first数据迁移 转

    coptto:http://www.cnblogs.com/miro/p/4164076.html 本篇是相对独立的一篇,主要讲解不丢失数据进行数据库结构升级. 前面我们讲解EF功能时(见第三篇文章) ...

  6. PHP中调用move_uploaded_file函数提示failed to open stream和 Unable to move

    在做一个PHP文件上传系统的时候,使用move_uploaded_file进行文件上传,提示下面两个warning,不能成功上传文件 Warning: move_uploaded_file(uploa ...

  7. Android手机浏览器访问本地网络相关问题

    为了测试开发的手机网站,常常需要使手机直接访问本地网络. 在这个过程中碰到几个问题,记下来供以后参考 1. 在本地主机运行apache后,使用localhost和127.0.0.1可以访问页面,但使用 ...

  8. spring mvc4：异常处理

    前面学习过struts2的异常处理,今天来看下spring mvc4的异常处理: 一.Servlet配置文件修改 <bean id="exceptionResolver" c ...

  9. java 客户端链接不上redis解决方案

    原文地址:http://blog.csdn.net/yingxiake/article/details/51472810 出现问题描述: 1.Could not get a resource from ...

  10. Linux文件结构及基本文件夹

    虽然Linux系统有很多种类,但是对于文件系统分区这块,基本上各个版本的Linux系统都是一样的.Linux文件系统分区不像Windows那样将硬盘分为C.D.E.F盘这样,Linux的文件结构是单个 ...