基于jQuery的JavaScript模版引擎JsRender使用指南(2)


 <!DOCTYPE html>
 <html>
   <head>
     <meta charset="utf-8">
     <title>嵌套循环使用参数访问父级数据 --- by 杨元</title>
     <style>
     </style>
   </head>
   <body>
     <div>
       <table>
         <thead>
           <tr>
             <th>序号</th>
             <th>姓名</th>
             <th>家庭成员</th>
           </tr>
         </thead>
         <tbody>
         </tbody>
       </table>
     </div>
     <script src="https://www.jb51.net/jquery.min.js"></script>
     <script src="https://www.jb51.net/jsviews.js"></script>
     <!-- 定义JsRender模版 -->
     <script type="text/x-jsrender">
       <tr>
         <td>{{:#index + 1}}</td>
         <td>{{:name}}</td>
         <td>
           {{!-- 使用for循环时,可以在后边添加参数,参数必须以~开头,多个参数用空格分隔 --}}
           {{!-- 通过参数,我们缓存了父级的数据,在子循环中通过访问参数,就可以间接访问父级数据 --}}
           {{for family ~parentIndex=#index ~parentName=name}}
             <b>{{:~parentIndex + 1}}.{{:#index + 1}}</b>
             {{!-- #data相当于this --}}
             {{:~parentName}}的{{:#data}}
           {{/for}}
         </td>
       </tr>
     </script>
     <script>
       //数据源
       var dataSrouce = [{
         name: "张三",
         family: [
           "爸爸",
           "妈妈",
           "哥哥"
         ]
       },{
         name: "李四",
         family: [
           "爷爷",
           "奶奶",
           "叔叔"
         ]
       }];
       //渲染数据
       var html = $("#testTmpl").render(dataSrouce);
       $("#list").append(html);
     </script>
   </body>
 </html>

 自定义标签(custom tag)中使用else(强烈不推荐)

复制代码 代码如下:

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/wgxdpp.html