这篇文章主要介绍了JsRender实用入门实例,包含了tag else使用、循环嵌套访问父级数据等知识点,并提供了完整的实例下载,非常具有实用价值,需要的朋友可以参考下
 
 

本文是一篇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实用入门教程的更多相关文章

  1. JsRender实用教程(tag else使用、循环嵌套访问父级数据)

    前言 JsRender是一款基于jQuery的JavaScript模版引擎,它具有如下特点: ·  简单直观 ·  功能强大 ·  可扩展的 ·  快如闪电 这些特性看起来很厉害,但几乎每个模版引擎, ...

  2. Echarts入门教程精简实用系列

    引语:echarts.js是百度团队推出的一款用于图表可视化的插件,用于以图表的形式展现数据,功能强大,上手简单 1.从官方网站中下载所需的echarts.js文件,该文件因功能广泛,包体较大,可自行 ...

  3. 推荐10个适合初学者的 HTML5 入门教程

    HTML5 作为下一代网站开发技术,无论你是一个 Web 开发人员或者想探索新的平台的游戏开发者,都值得去研究.借助尖端功能,技术和 API,HTML5 允许你创建响应性.创新性.互动性以及令人惊叹的 ...

  4. React JS快速入门教程

    翻译至官方文档<Tutorial>http://facebook.github.io/react/docs/tutorial.html 转载请注明出处:http://blog.csdn.n ...

  5. threejs构建web三维视图入门教程

    本文是一篇简单的webGL+threejs构建web三维视图的入门教程,你可以了解到利用threejs创建简单的三维图形,并且控制图形运动.若有不足,欢迎指出. 本文使用的框架是three.js gi ...

  6. Sprite Kit 入门教程

    Sprite Kit 入门教程  Ray Wenderlich on September 30, 2013 Tweet 这篇文章还可以在这里找到 英语, 日语 If you're new here, ...

  7. 正则表达式30分钟入门教程<转载>

    来园子之前写的一篇正则表达式教程,部分翻译自codeproject的The 30 Minute Regex Tutorial. 由于评论里有过长的URL,所以本页排版比较混乱,推荐你到原处查看,看完了 ...

  8. CSS入门教程——定位(positon)

    CSS入门教程——定位(positon) CSS定位在网页布局中是起着决定性作用.   定位 CSS的定位功能是很强大的,利用它你可以做出各种各样的网页布局.本节就介绍一些CSS常用的定位语句. 1. ...

  9. Swift语言Auto Layout入门教程:上篇

    原文:Beginning Auto Layout Tutorial in Swift: Part 1/2,译者:@TurtleFromMars 开始用自动布局约束的方式思考吧! 更新记录:该教程由Br ...

随机推荐

  1. java常用类-上

    一,常用类之一包装类 java开发中习惯把八大基本数据类型封装到一个类中,并提供属性和方法,更方便的操作基本数据类型. 包装类的出现并不是用于取代基本数据类型,也取代不了. 包装类位于java.lan ...

  2. Spring Boot报错 MultipartException The temporary upload...

    Spring Boot报错:尤其是在处理Ribbon这类接口调用型的负载均衡组件,常见问题 ERROR o.a.c.c.C.[.[.[.[dispatcherServlet] - Servlet.se ...

  3. icns图标的制作

    1. 准备一张无损的png图片(1024x1024) 2. 新建一个文件夹 必须要以iconset为后缀 $ mkdir hgl_pngpic.iconset 3. 使用sips 命令剪切10个不一样 ...

  4. leanote 信息栏显示笔记本和笔记类型

    本文解决如下两个问题: 1. 在列表视图下使用搜索时,不知道搜出来的笔记属于哪个笔记本.(摘要视图下是有显示的) 2. 增加显示笔记类型(markdown 或 富文本) 修改resources\app ...

  5. BZOJ 2594 水管局长数据加强版

    LCT维护最小生成树 要求两点路径最大的最小,首先想到的肯定是最小生成树,再加上有删边操作,那就得用LCT维护了. 可是对于cut一条边,我们要时刻维护图中的最小生成树,需要把之前被我们淘汰的边找回, ...

  6. Golang语言的入门开始

    一.golang介绍与安装 二.golang-hello world 三.golang的变量 四.golang的类型 五.golang的常量 六.golang的函数(func) 七.golang的包 ...

  7. 微信小程序与webview交互实现支付

    实现原理:点击h5网页的支付按钮——(跳转)——>嵌套改h5的小程序的支付页面——(处理支付)——>跳转至支付完成后的页面 注意:(1)网页h5中,引入微信的jssdk <scrip ...

  8. makefile 转载

    http://blog.csdn.net/hongfuhaocomon/article/details/51523394 http://blog.csdn.net/lanmanck/article/d ...

  9. 一、docker的原理

    一.docker解决什么问题: 高效的利用资源 应用之间相互隔离 应用之间不能发生资源抢占,每个应用只能使用事先注册申请的资源. 环境封装,利于迁移 二.docker的原理: 1.Namespaces ...

  10. idea 排除编译 参考

    参考自 : https://www.bbsmax.com/A/LPdoYLkGJ3/