基于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循环绑定事件
Jun 02 Javascript
Javascript中的arguments对象
Jun 20 Javascript
原生JS实现轮播效果+学前端的感受(防止走火入魔)
Aug 21 Javascript
AngularJS实现根据变量改变动态加载模板的方法
Nov 04 Javascript
jQuery联动日历的实例解析
Dec 02 Javascript
JavaScript常见的五种数组去重的方式
Dec 15 Javascript
详解webpack+es6+angular1.x项目构建
May 02 Javascript
详解bootstrap-fileinput文件上传控件的亲身实践
Mar 21 Javascript
纯javascript实现选择框的全选与反选功能
Apr 08 Javascript
Vue编写可显示周和月模式的日历 Vue自定义日历内容的显示
Jun 26 Javascript
基于Vue中使用节流Lodash throttle详解
Oct 30 Javascript
vue-cli点击实现全屏功能
Mar 07 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
简单实用的.net DataTable导出Execl
2013/10/28 PHP
php 模拟 asp.net webFrom 按钮提交事件实例
2014/10/13 PHP
基于php(Thinkphp)+jquery 实现ajax多选反选不选删除数据功能
2017/02/24 PHP
ThinkPHP框架表单验证操作方法
2017/07/19 PHP
PHP大文件分割上传 PHP分片上传
2017/08/28 PHP
PHP 使用位运算实现四则运算的代码
2021/03/09 PHP
javascript new一个对象的实质
2010/01/07 Javascript
js 通用javascript函数库整理
2011/08/14 Javascript
php显示当前文件所在的文件以及文件夹所有文件以树形展开
2013/12/13 Javascript
Javascript冒泡排序算法详解
2014/12/03 Javascript
AngularJS手动表单验证
2016/02/01 Javascript
confirm确认对话框的实现方法总结
2016/06/17 Javascript
移动端基础事件总结与应用
2017/01/12 Javascript
js中int和string数据类型互相转化实例
2019/01/16 Javascript
vue路由跳转传参数的方法
2019/05/06 Javascript
javascript中的this作用域详解
2019/07/15 Javascript
Vue指令之 v-cloak、v-text、v-html实例详解
2019/08/08 Javascript
vue router动态路由设置参数可选问题
2019/08/21 Javascript
解决vue elementUI 使用el-select 时 change事件的触发问题
2020/11/17 Vue.js
zbar解码二维码和条形码示例
2014/02/07 Python
Python对两个有序列表进行合并和排序的例子
2014/06/13 Python
Python中的面向对象编程详解(下)
2015/04/13 Python
python使用matplotlib绘制折线图教程
2017/02/08 Python
Python生成8位随机字符串的方法分析
2017/12/05 Python
CSS3哪些新特性值得称赞
2016/03/02 HTML / CSS
基于Html5实现的语音搜索功能
2019/05/13 HTML / CSS
Sahajan美国:阿育吠陀护肤品牌
2021/01/09 全球购物
应届生骨科医生求职信
2013/10/31 职场文书
兼职学生的自我评价
2013/11/24 职场文书
十岁生日家长答谢词
2014/01/17 职场文书
仓库文员岗位职责
2014/04/06 职场文书
小学生暑假家长评语
2014/04/17 职场文书
2014年保管员工作总结
2014/11/18 职场文书
出生证明范本
2015/06/15 职场文书
鲁滨逊漂流记读书笔记
2015/06/26 职场文书
接收函
2019/04/22 职场文书