编程 Javascript

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程序设计的学习有所帮助。

JsRender实用入门教程

- Author -

shichen2014

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

取得一定长度的内容，处理中文

Dec 20 Javascript

IE中createElement需要注意的一个问题

Jul 13 Javascript

js替换字符串的所有示例代码

Jul 23 Javascript

jQuery实现预加载图片的方法

Mar 17 Javascript

jQuery切换所有复选框选中状态的方法

Jul 02 Javascript

手机端转盘抽奖代码分享

Sep 10 Javascript

JS基于myFocus库实现各种功能的tab选项卡切换效果

Sep 19 Javascript

详解Bootstrap创建表单的三种格式（一）

Jan 04 Javascript

JavaScript的Backbone.js框架入门学习指引

May 07 Javascript

vue制作加载更多功能的正确打开方式

Oct 12 Javascript

Vue自定义弹窗指令的实现代码

Aug 13 Javascript

vue 输入电话号码自动按3-4-4分割功能的实现代码

Apr 30 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