这篇文章主要介绍了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. 聊聊 Scala 的伴生对象及其意义

    2019-04-22 关键字:Scala 伴生对象的作用 关于 Scala 伴生对象,比教材更详细的解释. 什么是伴生对象? 教材中关于伴生对象的解释是:实现类似 Java 中那种既有实例成员又有静态 ...

  2. Mac OSX下安装dlib （Python）

    1.在安装Dlib库之前需要安装的库:opencv,numpy 2.安装Xquartz2.7.11 Xquartz是执行Unix程序的图形窗口环境,为了兼容Unix和Linux下移植过来的程序就需要安 ...

  3. 使用apidoc生成项目文档

    [1]npm install apidoc -g 全局安装apidoc [2]apidoc -v 查看是否安装成功 [3]apidoc.json apidoc的项目级配置文件,它必须位于整个工程目录顶 ...

  4. JavaScript - proxy

    Proxy 对象用于定义基本操作的自定义行为(如属性查找,赋值,枚举,函数调用等). 来看看常用的方法 handler.get() let o = { name: 'liwenchi', age: 1 ...

  5. [Windows Doc]微软官方文档

    desktop: https://docs.microsoft.com/en-us/windows/desktop/index server:https://docs.microsoft.com/en ...

  6. python第六天

    深浅拷贝,元祖,字典 ,集合的定义以及基本操作方法 深浅拷贝 # 值拷贝:应用场景最多​值拷贝:先创建一个列表ls = [1, 'abc', [10]] 再定义 ls1 = ls  此处ls1会直接将 ...

  7. 传入list或map进行首字母大小写转换

    /**     * 首字母小写     * author:wp     */    public static Object keyFirstToLower(Object obj) throws Ex ...

  8. Money King【题解】

    我又傻了……竟然忘了区别大根堆和小根堆的性质,以至于一个符号打错,debug了半天……(我真是太菜了……) 题目描述 Once in a forest, there lived N aggressiv ...

  9. git bash 支持中文

      1. 编辑etc\gitconfig文件,在文件末尾增加以下内容: [gui] encoding = utf-8 #代码库统一使用utf-8 pathnameencoding = utf-8 #支 ...

  10. CDH5.16.1的maven依赖版本查询地址

    1查询官网地址,提供了详细的各个版本的jar依赖版本信息 https://www.cloudera.com/documentation/enterprise/release-notes/topics/ ...