jquery-jsrender使用

javaweb 专栏收录该内容
103 篇文章 0 订阅

 JsRender是一款基于jQuery的JavaScript模版引擎

特点:

·  简单直观
·  功能强大
·  可扩展的
·  快如闪电

 jsrender使用比较简单,本文简单结束一些常用的

使用过程:

1. 下载并导入相关js库(最后提供三个js源文件的源码copy,可直接使用)

 <script src="jsrender/jquery-1.8.0.min.js" type="text/javascript" charset="utf-8"></script>
 <script src="jsrender/jsrender.js" type="text/javascript" charset="utf-8"></script>
 <script src="jsrender/jsrender.min.js" type="text/javascript" charset="utf-8"></script>

 

 2.在页面中定义script快,并定义script的id和type类型为text/x-jsrender的。

<script id="testTmpl" type="text/x-jsrender">
<tr>
    jsrender代码
</tr>
</script>

 

 

此时jsrender模版基本完成,接下来介绍使用

3.js/jqueryton通过调用jsrender的templates函数渲染使用

例:

<script type="text/javascript"  charset="utf-8">
$(function(){
    var dataSrouce = [{}];//定义数据

      //几种渲染数据
      // 第一种(直接渲染)
      //var html = $("#testTmpl").render(dataSrouce);
      // 第二种(直接templates指定渲染)
      //var html = $.templates("#testTmpl").render(dataSrouce);
      // 第三种(复制渲染)
      $.templates("personTmpl", "#testTmpl"); 
      var html = $.render.personTmpl(dataSrouce);  
    // list为页面需要加载到哪个标签下的标签id
      $("#list").append(html);
});
</script>

 

 

 

 以下看一个完整实列

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
  <title> New Document </title>
  <meta name="Generator" content="EditPlus">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
 <script src="jsrender/jquery-1.8.0.min.js" type="text/javascript" charset="utf-8"></script>
 <script src="jsrender/jsrender.js" type="text/javascript" charset="utf-8"></script>
 <script src="jsrender/jsrender.min.js" type="text/javascript" charset="utf-8"></script>
 </head>

 <body>
      <div>
      <table width="800" border="1">
        <thead>
          <tr>
            <th width="10%">序号</th>
            <th width="30%">姓名</th>
            <th width="80%">家庭成员</th>
          </tr>
        </thead>
        <tbody id="list">
          
        </tbody>
      </table>
    </div>
 </body>
</html>
<script id="testTmpl" type="text/x-jsrender">
<tr>
    <td>{{:#index + 1}}</td>
    <td>{{:name}}</td>
    <td>
      {{for family}}
      {{:#data}}
      {{/for}}
    </td>
</tr>
</script>
<script type="text/javascript"  charset="utf-8">
$(function(){
    var dataSrouce = [{
        name: "张三",
        family: [
          "爸爸",
          "妈妈",
          "哥哥"
        ]
      },{
        name: "李四",
        family: [
          "爷爷",
          "奶奶",
          "叔叔"
        ]
      }];

      //几种渲染数据
      // 第一种(直接渲染)
      //var html = $("#testTmpl").render(dataSrouce);
      // 第二种(直接templates指定渲染)
      //var html = $.templates("#testTmpl").render(dataSrouce);
      // 第三种(复制渲染)
      $.templates("personTmpl", "#testTmpl"); 
      var html = $.render.personTmpl(dataSrouce);  

      $("#list").append(html);
});
</script>

 

 图列

 

 

jsrender的各种标签或关键子的使用

1.jsrender快中通过键值对的方式使用
2.取值情况
   {{:x}}取属性
   {{for x}} 循环遍历
   {{:#data}}相当this
   {{:#parent}} 属性的父级
   {{:#index}} 当前属性的位置下标,0开始
   

 

 

 

jsrender其他的一些使用

1.for循环时定义参数,相当于设置父级变量直接访问

<!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>

 

 

2.自定义标签,同时也可以支持自定义标签时支持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>

 

 

3.自定义标签使用

<!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>
  • 1
    点赞
  • 0
    评论
  • 5
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

©️2021 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值