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


Posted in Javascript onDecember 29, 2014

前言

     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>

演示代码打包下载:http://xiazai.3water.com/201412/yuanma/JsRender_Demo(3water.com).rar

Javascript 相关文章推荐
Ruffy javascript 学习笔记
Nov 30 Javascript
浅析ajax请求json数据并用js解析(示例分析)
Jul 13 Javascript
纯css+js写的一个简单的tab标签页带样式
Jan 28 Javascript
浅谈javascript获取元素transform参数
Jul 24 Javascript
jQuery插件passwordStrength密码强度指标详解
Jun 24 Javascript
vue.js初学入门教程(1)
Nov 03 Javascript
js实现弹窗暗层效果
Jan 16 Javascript
如何快速上手Vuex
Feb 14 Javascript
js仿网易表单及时验证功能
Mar 07 Javascript
使用bootstrap插件实现模态框效果
May 10 Javascript
Vue.js实现可配置的登录表单代码详解
Mar 29 Javascript
JS实现滑动导航效果
Jan 14 Javascript
JavaScript中的数学运算介绍
Dec 29 #Javascript
jQuery中:lt选择器用法实例
Dec 29 #Javascript
JavaScript中的数值范围介绍
Dec 29 #Javascript
JavaScript常用小技巧小结
Dec 29 #Javascript
jQuery中:gt选择器用法实例
Dec 29 #Javascript
在浏览器中实现图片粘贴的jQuery插件-- pasteimg使用指南
Dec 29 #Javascript
JavaScript中的值类型详细介绍
Dec 29 #Javascript
You might like
PHP制作图型计数器的例子
2006/10/09 PHP
有关于PHP中常见数据类型的汇总分享
2014/01/06 PHP
PHP中串行化用法示例
2016/11/16 PHP
特殊字符、常规符号及其代码对照表
2006/06/26 Javascript
编辑浪子版表单验证类
2007/05/12 Javascript
jQuery对象和DOM对象的相互转化实现代码
2010/03/02 Javascript
Jquery实现鼠标移上弹出提示框、移出消失思路及代码
2013/05/19 Javascript
JQEasy-ui在IE9以下版本中二次加载的问题分析及处理方法
2014/06/23 Javascript
jQuery统计指定子元素数量的方法
2015/03/17 Javascript
javascript+html5实现绘制圆环的方法
2015/07/28 Javascript
js实现密码强度检验
2017/01/15 Javascript
客户端(vue框架)与服务器(koa框架)通信及服务器跨域配置详解
2017/08/26 Javascript
关于jquery中attr()和prop()方法的区别
2018/05/28 jQuery
PHP实现基于Redis的MessageQueue队列封装操作示例
2019/02/02 Javascript
[47:03]完美世界DOTA2联赛PWL S3 Galaxy Racer vs Phoenix 第二场 12.10
2020/12/13 DOTA
使用PDB模式调试Python程序介绍
2015/04/05 Python
Python基于Matplotlib库简单绘制折线图的方法示例
2017/08/14 Python
Python基于回溯法子集树模板实现图的遍历功能示例
2017/09/05 Python
python多维数组切片方法
2018/04/13 Python
解决安装python库时windows error5 报错的问题
2018/10/21 Python
python求加权平均值的实例(附纯python写法)
2019/08/22 Python
python对象转字典的两种实现方式示例
2019/11/07 Python
python应用Axes3D绘图(批量梯度下降算法)
2020/03/25 Python
jupyter notebook清除输出方式
2020/04/10 Python
Django中的DateTimeField和DateField实现
2021/02/24 Python
俄罗斯运动鞋商店:Sneakerhead
2018/05/10 全球购物
美国棒球装备和用品商店:Baseball Savings
2018/06/09 全球购物
Mio Skincare英国官网:身体紧致及孕期身体护理
2018/08/19 全球购物
请解释流与文件有什么不同
2016/07/29 面试题
应届毕业生个人自我评价
2013/09/20 职场文书
领导班子党的群众路线对照检查材料
2014/09/25 职场文书
2014业务员年终工作总结
2014/12/09 职场文书
悬空寺导游词
2015/02/05 职场文书
酒店优秀员工推荐信
2015/03/24 职场文书
小学语文继续教育研修日志
2015/11/13 职场文书
css样式important规则的正确使用方式
2022/06/10 HTML / CSS