本文是一篇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="/UploadFiles/2021-04-02/jquery.min.js">     <script src="jsviews.js">    
    <!-- 定义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="/UploadFiles/2021-04-02/jquery.min.js">     <script src="jsviews.js">    
    <!-- 定义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="/UploadFiles/2021-04-02/jquery.min.js">     <script src="jsviews.js">    
    <!-- 定义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="/UploadFiles/2021-04-02/jquery.min.js">     <script src="jsviews.js">    
    <!-- 定义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,实用,入门,教程

免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
狼山资源网 Copyright www.pvsay.com

评论“JsRender实用入门教程”

暂无“JsRender实用入门教程”评论...