基于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 相关文章推荐
Javascript select下拉框操作常用方法
Nov 09 Javascript
jquery获取input表单值的代码
Apr 19 Javascript
Javascript 异步加载详解(浏览器在javascript的加载方式)
May 20 Javascript
zTree插件之单选下拉菜单实例代码
Nov 07 Javascript
浅谈JSON和JSONP区别及jQuery的ajax jsonp的使用
Nov 23 Javascript
浅谈关于JavaScript API设计的一些建议和准则
Jun 24 Javascript
关于Bootstrap弹出框无法调用问题的解决办法
Mar 10 Javascript
拥Bootstrap入怀——导航栏篇
May 30 Javascript
全面解析JS字符串和正则表达式中的match、replace、exec等函数
Jul 01 Javascript
详解用async/await来处理异步
Aug 28 Javascript
vue实现把接口单独存放在一个文件方式
Aug 13 Javascript
实现vuex原理的示例
Oct 21 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 作用域解析运算符(::)
2010/07/27 PHP
浅析PHP中Session可能会引起并发问题
2015/07/23 PHP
LaravelS通过Swoole加速Laravel/Lumen详解
2018/03/02 PHP
laravel-admin 实现给grid的列添加行数序号的方法
2019/10/08 PHP
PHPExcel实现的读取多工作表操作示例
2020/04/14 PHP
PHP如何使用array_unshift()在数组开头插入元素
2020/09/01 PHP
Swoole扩展的6种模式深入详解
2021/03/04 PHP
JS+CSS实现淡入式焦点图片幻灯切换效果的方法
2015/02/26 Javascript
JavaScript判断是否为数组的3种方法及效率比较
2015/04/01 Javascript
jquery事件的ready()方法使用详解
2015/11/11 Javascript
jQuery实现二级下拉菜单效果
2016/01/05 Javascript
简单实现AngularJS轮播图效果
2020/04/10 Javascript
vue2的todolist入门小项目的详细解析
2017/05/11 Javascript
vue封装一个简单的div框选时间的组件的方法
2019/01/06 Javascript
仿vue-cli搭建属于自己的脚手架的方法步骤
2019/04/17 Javascript
vue学习笔记之过滤器的基本使用方法实例分析
2020/02/01 Javascript
JavaScript实现移动端带transition动画的轮播效果
2020/03/24 Javascript
[14:24]Optic Gaming vs PSG LGD BO3
2018/06/07 DOTA
Python中optionParser模块的使用方法实例教程
2014/08/29 Python
跟老齐学Python之编写类之四再论继承
2014/10/11 Python
Python随手笔记之标准类型内建函数
2015/12/02 Python
Python安装使用命令行交互模块pexpect的基础教程
2016/05/12 Python
Python 编码处理-str与Unicode的区别
2016/09/06 Python
python爬虫实战之最简单的网页爬虫教程
2017/08/13 Python
django-allauth入门学习和使用详解
2019/07/03 Python
Python使用import导入本地脚本及导入模块的技巧总结
2019/08/07 Python
深入理解Tensorflow中的masking和padding
2020/02/24 Python
利用python画出AUC曲线的实例
2020/02/28 Python
python 元组的使用方法
2020/06/09 Python
简约控的天堂:The Undone
2016/12/21 全球购物
Blancsom美国/加拿大:服装和生活用品供应商
2018/07/27 全球购物
Hudson Jeans官网:高级精制牛仔裤
2018/11/28 全球购物
介绍一下木马病毒的种类
2015/07/26 面试题
开办加工厂创业计划书
2014/01/03 职场文书
职业生涯规划书怎么写?
2014/09/14 职场文书
工伤事故赔偿协议书
2015/08/06 职场文书