基于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的ajax获取数据后的处理总结(html,xml,json)
Jul 14 Javascript
JScript分割字符串示例代码
Sep 04 Javascript
使用jQuery仿苹果官网焦点图特效
Dec 23 Javascript
jquery选择器简述
Aug 31 Javascript
分享jQuery封装好的一些常用操作
Jul 28 Javascript
KnockoutJS 3.X API 第四章之click绑定
Oct 10 Javascript
js实现增加数字显示的环形进度条效果
Feb 05 Javascript
Bootstrap表单简单实现代码
Mar 06 Javascript
Vue分页组件实例代码
Apr 17 Javascript
微信小程序实现的一键拨号功能示例
Apr 24 Javascript
如何利用node.js开发一个生成逐帧动画的小工具
Dec 01 Javascript
详细聊聊vue中组件的props属性
Nov 02 Vue.js
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+iframe实现隐藏无刷新上传文件
2012/02/10 PHP
ThinkPHP的URL重写问题
2014/06/22 PHP
php编译安装php-amq扩展简明教程
2016/06/25 PHP
PHP7新增运算符用法实例分析
2016/09/26 PHP
Thinkphp开发--集成极光推送
2017/09/15 PHP
Thinkphp3.2简单解决多文件上传只上传一张的问题
2017/09/26 PHP
Yii使用EasyWechat实现小程序获取用户的openID的方法
2020/04/29 PHP
JavaScript事件类型中焦点、鼠标和滚轮事件详解
2016/01/25 Javascript
javascript之with的使用(阿里云、淘宝使用代码分析)
2016/10/11 Javascript
微信js-sdk界面操作接口用法示例
2016/10/12 Javascript
Nodejs进阶:核心模块net入门学习与实例讲解
2016/11/21 NodeJs
详解js中Json的语法与格式
2016/11/22 Javascript
jQuery+ajax实现局部刷新的两种方法
2017/06/08 jQuery
vue监听对象及对象属性问题
2018/08/20 Javascript
Vue实现手机扫描二维码预览页面效果
2020/05/28 Javascript
删除目录下相同文件的python代码(逐级优化)
2012/05/25 Python
python实现12306火车票查询器
2017/04/20 Python
JavaScript中的模拟事件和自定义事件实例分析
2018/07/27 Python
python之消除前缀重命名的方法
2018/10/21 Python
python用post访问restful服务接口的方法
2018/12/07 Python
Python爬虫实现获取动态gif格式搞笑图片的方法示例
2018/12/24 Python
mac在matplotlib中显示中文的操作方法
2020/03/06 Python
解决Keras自带数据集与预训练model下载太慢问题
2020/06/12 Python
Python常用外部指令执行代码实例
2020/11/05 Python
css3圆角样式分享自定义按钮样式
2013/12/27 HTML / CSS
美国在线家居装饰店:Belle&June
2018/10/24 全球购物
英格兰足协官方商店:England Store
2019/07/12 全球购物
zooplus波兰:在线宠物店
2019/07/21 全球购物
空字符串(“”)和null的区别
2012/11/13 面试题
文体活动总结范文
2014/05/05 职场文书
经典禁毒标语
2014/06/16 职场文书
新闻发布会活动策划方案
2014/09/15 职场文书
2014年除四害工作总结
2014/12/06 职场文书
死亡诗社观后感
2015/06/05 职场文书
导游词之江西赣州
2019/10/15 职场文书
springboot集成flyway自动创表的详细配置
2021/06/26 Java/Android