基于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 相关文章推荐
基于jquery的多彩百分比 动态进度条 投票效果显示效果实现代码
Aug 28 Javascript
jquery命令汇总,方便使用jquery的朋友
Jun 26 Javascript
13 个JavaScript 性能提升技巧分享
Jul 26 Javascript
AngularJS基础学习笔记之简单介绍
May 10 Javascript
js实现的二分查找算法实例
Jan 21 Javascript
javascript实现起伏的水波背景效果
May 16 Javascript
原生JS取代一些JQuery方法的简单实现
Sep 20 Javascript
AngularJS  ng-table插件设置排序
Sep 21 Javascript
jQuery实现字符串全部替换的方法【推荐】
Mar 09 Javascript
vue生命周期与钩子函数简单示例
Mar 13 Javascript
浅析JS中NEW的实现原理及重写
Feb 20 Javascript
Nuxt.js的路由跳转操作(页面跳转nuxt-link)
Nov 06 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版本升级到7.x后wordpress的一些修改及wordpress技巧
2015/12/25 PHP
简单谈谈php延迟静态绑定
2016/01/26 PHP
微信支付开发交易通知实例
2016/07/12 PHP
php中简单的对称加密算法实现
2017/01/05 PHP
php 查找数组元素提高效率的方法详解
2017/05/05 PHP
PHP排序算法之归并排序(Merging Sort)实例详解
2018/04/21 PHP
PHP实现非阻塞模式的方法分析
2018/07/26 PHP
safari下载文件自动加了html后缀问题
2018/11/09 PHP
Gambit vs CL BO3 第二场 2.13
2021/03/10 DOTA
asp.net下利用js实现返回上一页的实现方法小集
2009/11/24 Javascript
js截取中英文字符串、标点符号无乱码示例解读
2014/04/17 Javascript
jQuery实现加入收藏夹功能(主流浏览器兼职)
2016/12/24 Javascript
原生JS实现几个常用DOM操作API实例
2017/01/19 Javascript
URL中“#” “?” &amp;“”号的作用浅析
2017/02/04 Javascript
从零开始学习Node.js系列教程五:服务器监听方法示例
2017/04/13 Javascript
nodejs密码加密中生成随机数的实例代码
2017/07/17 NodeJs
详解ES6 Fetch API HTTP请求实用指南
2018/11/14 Javascript
微信小程序wx.getUserInfo授权获取用户信息(头像、昵称)的实现
2020/08/19 Javascript
[01:33]DOTA2上海特级锦标赛 LIQUID战队完整宣传片
2016/03/16 DOTA
Python引用模块和查找模块路径
2016/03/17 Python
Python的collections模块中namedtuple结构使用示例
2016/07/07 Python
深入理解Python中的内置常量
2017/05/20 Python
Python实现类的创建与使用方法示例
2017/07/25 Python
python3第三方爬虫库BeautifulSoup4安装教程
2018/06/19 Python
Python封装原理与实现方法详解
2018/08/28 Python
wxPython色环电阻计算器
2019/11/18 Python
解决Tensorflow sess.run导致的内存溢出问题
2020/02/05 Python
Python pandas对excel的操作实现示例
2020/07/21 Python
Python 调用C++封装的进一步探索交流
2021/03/04 Python
HTML 5 input placeholder 属性如何完美兼任ie
2014/05/12 HTML / CSS
美国基督教约会网站:ChristianCafe.com
2020/02/04 全球购物
大学生学习党课思想汇报
2014/01/03 职场文书
社区文明创建工作总结2015
2015/04/21 职场文书
毕业论文答辩稿范文
2015/06/23 职场文书
使用nginx动态转换图片大小生成缩略图
2021/03/31 Servers
Nginx代理同域名前后端分离项目的完整步骤
2021/03/31 Servers