个人中心
gpt4 book ai didi

JsRender实用入门教程

转载 作者：qq735679552 更新时间：2022-09-27 22:32:09 25 4
gpt4 key购买 nike

CFSDN坚持开源创造价值，我们致力于搭建一个资源共享平台，让每一个IT人在这里找到属于你的精彩世界.

这篇CFSDN的博客文章JsRender实用入门教程由作者收集整理，如果你对这篇文章有兴趣，记得点赞哟.

本文是一篇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实用入门教程的文章就讲到这里了,如果你想了解更多关于JsRender实用入门教程的内容请搜索CFSDN的文章或继续浏览相关文章，希望大家以后支持我的博客！ 。

25 4 0
文章推荐： 正则表达式不区分大小写以及解决思路的探索
文章推荐： php+正则将字符串中的字母数字和中文分割
文章推荐： 史上最详细的js日期正则表达式分享
文章推荐： 使用正则表达式匹配[***]样式的字符串
qq735679552
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com