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>
  • 相关阅读:
    mtk lk阶段的lcm流程
    MTK touchscreen 流程
    MTK DDR调试
    增加,删除GMS包
    最大最小背光亮度修改
    HDMI 8193 配置
    mtk6737t摄像头配置文件的编译
    camera调试命令
    Linux 终端显示 Git 当前所在分支
    ubuntu系统,关于源(source)的配置
  • 原文地址:https://www.cnblogs.com/hwaggLee/p/4632153.html
Copyright © 2011-2022 走看看