JsRender实用入门教程


Posted in Javascript onOctober 31, 2014

本文是一篇JsRender的实用入门教程,实例讲述了tag else使用、循环嵌套访问父级数据等知识点。分享给大家供大家参考。具体如下:

前言

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>

完整实例代码点击此处本站下载。

希望本文所述对大家JsRender程序设计的学习有所帮助。

Javascript 相关文章推荐
js调试工具 Javascript Debug Toolkit 2.0.0版本发布
Dec 02 Javascript
TinyMCE 新增本地图片上传功能
Nov 05 Javascript
jQuery javaScript捕获回车事件(示例代码)
Nov 07 Javascript
浅析JavaScript中的delete运算符
Nov 30 Javascript
javascript删除数组元素并且数组长度减小的简单实例
Feb 14 Javascript
jQuery中DOM操作实例分析
Jan 23 Javascript
js实现仿QQ秀换装效果的方法
Mar 04 Javascript
jQuery匹配文档链接并添加class的方法
Jun 26 Javascript
javascript实现全角半角检测的方法
Jul 23 Javascript
Angular.js跨controller实现参数传递的两种方法
Feb 20 Javascript
jQuery Form插件使用详解_动力节点Java学院整理
Jul 17 jQuery
VsCode插件整理(小结)
Sep 14 Javascript
JsRender for object语法简介
Oct 31 #Javascript
JsRender for index循环索引用法详解
Oct 31 #Javascript
javascript常用函数归纳整理
Oct 31 #Javascript
让html页面不缓存js的实现方法
Oct 31 #Javascript
js读取cookie方法总结
Oct 31 #Javascript
jQuery获取对象简单实现方法小结
Oct 30 #Javascript
js 通过cookie实现刷新不变化树形菜单
Oct 30 #Javascript
You might like
深入解析PHP 5.3.x 的strtotime() 时区设定 警告信息修复
2013/08/05 PHP
PHP CURL获取cookies模拟登录的方法
2013/11/04 PHP
php通过array_merge()函数合并关联和非关联数组的方法
2015/03/18 PHP
php使用Jpgraph绘制复杂X-Y坐标图的方法
2015/06/10 PHP
PHP token验证生成原理实例分析
2019/06/05 PHP
Extjs 4.x 得到form CheckBox 复选框的值
2014/05/04 Javascript
AngularJS 表达式详细讲解及实例代码
2016/07/26 Javascript
Bootstrap字体图标无法正常显示的解决方法
2016/10/08 Javascript
JavaScript 用fetch 实现异步下载文件功能
2017/07/21 Javascript
关于webpack2和模块打包的新手指南(小结)
2017/08/07 Javascript
详解JS数组Reduce()方法详解及高级技巧
2017/08/18 Javascript
详解vue mint-ui源码解析之loadmore组件
2017/10/11 Javascript
angular实现页面打印局部功能的思考与方法
2018/04/13 Javascript
layui 对弹窗 form表单赋值的实现方法
2019/09/04 Javascript
vue实现评价星星功能
2020/06/30 Javascript
python中去空格函数的用法
2014/08/21 Python
Python and、or以及and-or语法总结
2015/04/14 Python
pyenv命令管理多个Python版本
2017/03/26 Python
快速了解Python中的装饰器
2018/01/11 Python
Python SVM(支持向量机)实现方法完整示例
2018/06/19 Python
解决python "No module named pip" 的问题
2018/10/13 Python
对Python定时任务的启动和停止方法详解
2019/02/19 Python
python找出因数与质因数的方法
2019/07/25 Python
Django Form 实时从数据库中获取数据的操作方法
2019/07/25 Python
python实现车牌识别的示例代码
2019/08/05 Python
python getpass实现密文实例详解
2019/09/24 Python
10行Python代码计算汽车数量的实现方法
2019/10/23 Python
django 实现简单的插入视频
2020/04/07 Python
Python基于Webhook实现github自动化部署
2020/11/28 Python
用python-webdriver实现自动填表的示例代码
2021/01/13 Python
戴森美国官网:Dyson美国
2016/09/11 全球购物
BONIA官方网站:国际奢侈品牌和皮革专家
2016/11/27 全球购物
英国羊绒服装购物网站:Pure Collection
2018/10/22 全球购物
个性化皮包、小袋、生活配件:Mon Purse
2019/03/26 全球购物
创先争优标语
2014/06/27 职场文书
导游词之无锡梅园
2019/11/28 职场文书