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 相关文章推荐
模拟用户操作Input元素,不会触发相应事件
May 11 Javascript
flexigrid 类似ext grid的JS表格代码
Jul 17 Javascript
jquery下onpropertychange事件的绑定方法
Aug 01 Javascript
网页中返回顶部代码(多种方法)另附注释说明
Apr 24 Javascript
js select下拉联动 更具级联性!
Apr 17 Javascript
微信小程序  TLS 版本必须大于等于1.2问题解决
Feb 22 Javascript
React-Native实现ListView组件之上拉刷新实例(iOS和Android通用)
Jul 11 Javascript
js前端导出Excel的方法
Nov 01 Javascript
Vue 按键修饰符处理事件的方法
May 04 Javascript
Vue拖拽组件开发实例详解
May 11 Javascript
详解JavaScript添加给定的标签选项
Sep 17 Javascript
JavaScript实现alert弹框效果
Nov 19 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与MySQL开发中页面出现乱码的一种解决方法
2007/07/29 PHP
php一句话cmdshell新型 (非一句话木马)
2009/04/18 PHP
浅析PHP递归函数返回值使用方法
2013/02/18 PHP
php实例分享之通过递归实现删除目录下的所有文件详解
2014/05/15 PHP
推荐10个提供免费PHP脚本下载的网站
2014/12/31 PHP
PHP解密Unicode及Escape加密字符串
2015/05/17 PHP
PHP云打印类完整示例
2016/10/15 PHP
JavaScript 学习笔记二 字符串拼接
2010/03/28 Javascript
js创建子窗口并且回传值示例代码
2013/07/02 Javascript
基于jquery自定义的漂亮单选按钮RadioButton
2013/11/19 Javascript
JavaScript中的连字符详解
2013/11/28 Javascript
JavaScript异步编程Promise模式的6个特性
2014/04/03 Javascript
将HTML的左右尖括号等转义成实体形式的两种实现方式
2014/05/04 Javascript
jquery实现拖动效果
2016/08/10 Javascript
jQuery实现右键菜单、遮罩等效果代码
2016/09/27 Javascript
解决OneThink中无法异步提交kindeditor文本框中修改后的内容方法
2017/05/05 Javascript
js实现鼠标跟随运动效果
2020/08/02 Javascript
详解Vue组件之作用域插槽
2018/11/22 Javascript
[06:07]DOTA2-DPC中国联赛3月5日Recap集锦
2021/03/11 DOTA
python实现目录树生成示例
2014/03/28 Python
Python多进程编程技术实例分析
2014/09/16 Python
将Django项目部署到CentOs服务器中
2018/10/18 Python
Tensorflow 1.0之后模型文件、权重数值的读取方式
2020/02/12 Python
详解Python3.8+PyQt5+pyqt5-tools+Pycharm配置详细教程
2020/11/02 Python
简历的自荐信
2013/12/19 职场文书
有关打架的检讨书
2014/01/25 职场文书
教师岗位聘任书范文
2014/03/29 职场文书
公职人员索取回扣检举信
2014/04/04 职场文书
销售岗位职责范本
2014/06/12 职场文书
群众路线领导对照材料
2014/08/23 职场文书
四风剖析查摆对照检查材料思想汇报
2014/09/24 职场文书
2015毕业生自我评价范文
2015/03/02 职场文书
捐书仪式主持词
2015/07/04 职场文书
教师培训简讯
2015/07/20 职场文书
2019教师的学习计划
2019/06/25 职场文书
2019最新版试用期劳动合同模板!
2019/07/04 职场文书