zoukankan      html  css  js  c++  java
  • jsrender-for循环中访问父属性

    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>
  • 相关阅读:
    令我印象最深刻的三个老师
    硬盘大于2T安装CentOS7.X时要注意分区
    Linux网卡配置
    Python13:文件操作
    Python12:集合
    Python11:字典
    Python10:String字符串
    Python09:元组
    Python08:列表
    Python07:模块初识
  • 原文地址:https://www.cnblogs.com/hwaggLee/p/4632153.html
Copyright © 2011-2022 走看看