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

时间:2022-11-19 15:07:41

前言

     JsRender是一款基于jQuery的JavaScript模版引擎,它具有如下特点:

          ·  简单直观

          ·  功能强大

          ·  可扩展的

          ·  快如闪电

     这些特性看起来很厉害,但几乎每个模版引擎,都会这么宣传。。。

     由于工作需要,小菜才接触到此款模版引擎。使用了一段时间,发现它确实比较强大,但小菜觉得有些地方强大的过头了,反倒让人觉得很难理解。

     另一方面,JsRender的官方文档比较详细,但其他资料出奇的少,遇到点什么问题,基本搜不到,不仅仅是相关问题搜不到,几乎就是没有结果。

     再加上JsRender有些地方确实是不好理解,所以急需小菜分享一些“最佳实践”。

     基于最近一段时间的使用,小菜总结了一些实用经验,当然,这些经验在官方文档上是找不到的。

     注意:本文不是基础入门教程,以下例子中自带注释,不做过多说明,读者自行体会,不懂的地方可以留言。

 嵌套循环使用#parent访问父级数据(不推荐)

 

复制代码 代码如下:

 <!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>

 

嵌套循环使用参数访问父级数据(推荐)

 

复制代码 代码如下:

 <!DOCTYPE html>
 <html>
   <head>
     <meta charset="utf-8">
     <title>嵌套循环使用参数访问父级数据 --- 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循环时,可以在后边添加参数,参数必须以~开头,多个参数用空格分隔 --}}
           {{!-- 通过参数,我们缓存了父级的数据,在子循环中通过访问参数,就可以间接访问父级数据 --}}
           {{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(强烈不推荐)

 

复制代码 代码如下:

 <!DOCTYPE html>
 <html>
   <head>
     <meta charset="utf-8">
     <title>自定义标签中使用else --- by 杨元</title>
     <style>
     </style>
   </head>
   <body>
     <div>
       <table>
         <thead>
           <tr>
             <th width="50%">名称</th>
             <th width="50%">单价</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>{{:name}}</td>
         <td>
           {{!-- isShow为自定义标签,price是传入的参数,status是附加属性 --}}
           {{isShow price status=0}}
             {{:price}}
           {{else price status=1}}
             --
           {{/isShow}}
         </td>
       </tr>
     </script>
     <script>
       //数据源
       var dataSrouce = [{
         name: "苹果",
         price: 108
       },{
         name: "鸭梨",
         price: 370
       },{
         name: "桃子",
         price: 99
       },{
         name: "菠萝",
         price: 371
       },{
         name: "橘子",
         price: 153
       }];
       //自定义标签
       $.views.tags({
         "isShow": function(price){
           var temp=price+''.split('');
           if(this.tagCtx.props.status === 0){
             //判断价格是否为水仙花数,如果是,则显示,否则不显示
             if(price==(Math.pow(parseInt(temp[0],10),3)+Math.pow(parseInt(temp[1],10),3)+Math.pow(parseInt(temp[2],10),3))){
               return this.tagCtxs[0].render();
             }else{
               return this.tagCtxs[1].render();
             }
           }else{
             return "";
           }
         }
       });
       //渲染数据
       var html = $("#testTmpl").render(dataSrouce);
       $("#list").append(html);
     </script>
   </body>
 </html>

 

用helper代替自定义标签(推荐)

 

复制代码 代码如下:

 <!DOCTYPE html>
 <html>
   <head>
     <meta charset="utf-8">
     <title>用helper代替自定义标签 --- by 杨元</title>
     <style>
     </style>
   </head>
   <body>
     <div>
       <table>
         <thead>
           <tr>
             <th width="50%">名称</th>
             <th width="50%">单价</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>{{:name}}</td>
         <td>
           {{!-- 利用原生的if做分支跳转,利用helper做逻辑处理 --}}
           {{if ~isShow(price)}}
             {{:price}}
           {{else}}
             --
           {{/if}}
         </td>
       </tr>
     </script>
     <script>
       //数据源
       var dataSrouce = [{
         name: "苹果",
         price: 108
       },{
         name: "鸭梨",
         price: 370
       },{
         name: "桃子",
         price: 99
       },{
         name: "菠萝",
         price: 371
       },{
         name: "橘子",
         price: 153
       }];
       //Helper
       $.views.helpers({
         "isShow": function(price){
           var temp=price+''.split('');
           if(price==(Math.pow(parseInt(temp[0],10),3)+Math.pow(parseInt(temp[1],10),3)+Math.pow(parseInt(temp[2],10),3))){
             return true;
           }else{
             return false;
           }
         }
       });
       //渲染数据
       var html = $("#testTmpl").render(dataSrouce);
       $("#list").append(html);
     </script>
   </body>
 </html>