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


 <!DOCTYPE html>
 <html>
   <head>
     <meta charset="utf-8">
     <title>自定义标签中使用else --- by 杨元</title>
     <style>
     </style>
   </head>
   <body>
     <div>
       <table>
         <thead>
           <tr>
             <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>{{: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代替自定义标签(推荐)

复制代码 代码如下:

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

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