JSRender模板一-白红宇

JSRender模板一

阅读量：5966 次

发布时间：2019-06-19

本文共 3549 字，大约阅读时间需要 11 分钟。

JSRender之内置的模板标签

（一） JsRender模板，被称为"下一代jQuery模板"，为高性能的、纯粹基于字符串的呈现做了优化，并且不依赖于DOM或jQuery。在JsRender中，是通过调用方法render()来渲染模板的，换句话说，就是在Html文件中使用java script来输出html模板的内容。

一、什么是JsRender？

JsRender是一个简单、直观，强大、易扩展、轻量的最优UI模板。

换句话说，就是在Html文件中使用java script来输出html模板的内容。

二、附件是最新的jsrender.js和jsrender.min.js（2013/07/27），如果想下载最新的jsrender.js和jsrender.min.js,可以去官方文档下载：

二、玩转JsRender

内置的模板标签（Built-in template tags）

1. {

{: ...}}：用于输出"..."部分指定的数据，“...”部分是数据来源的路径或者是一个数据表达式，例如：{

{:address.street}}

例子：

html代码

<%@ page contentType="text/html;charset=UTF-8" language="java" %>    测试  <%@ include file="/global/commonPage/includeHead/head.jsp" %>  
    
       
     
      
         
       
            
        
                   
         
          姓名      
          
           性别      
           
            薪资      
            
             电话            
             
                    
              
                 
               
                    
                
                           
                 
                  姓名            
                  
                         <%--定义jsrender模板--%>
                   
                         
                    
                     { {:name}}

其中：在jsRender中，#xxx 表示当前view的 xxx 属性， - 所以 #index 就是view.index

{

{：#index}}

在JsRender中，是通过调用方法render()来渲染模板的。JsRender中，有三种方式调用render()方法来渲染模板。这其中用了两种，还一种方法是通过名字注册的template，如：

 $.templates("templ","#theTmpl");  $("#result2").html($.render.templ(data1));

运行结果如下

2. {

{>...}} 用于输出encoded的html。

<%@ page contentType="text/html;charset=UTF-8" language="java" %>    测试  <%@ include file="/global/commonPage/includeHead/head.jsp" %>  
    
       
     
      
         
       
            
        
                   
         
          姓名      
          
           性别      
           
            薪资      
            
             电话            
             
                    <%--定义jsrender模板--%>
              
                    
               
                { {:name}} 
                
                 { {>name}}

运行结果：

3. {

{include tmpl=... /}} 标签用于组合模板(template composition) -----用于在一个模板中引入另一个模板，并用上下文的数据来渲染template。

<%@ page contentType="text/html;charset=UTF-8" language="java" %>    测试  <%@ include file="/global/commonPage/includeHead/head.jsp" %>  
    
       
     
      
         
       
            
        
                   
         
          姓名      
          
           性别      
           
            薪资      
            
             电话            
             
                    <%--定义jsrender模板--%>
              
                
               
                { {:anmont.pay}}
                
                       
                 
                  { {:#index}}:{ {:name}}          
                  
                   { {:sex}}         { {include tmpl="#theTmpl"/}}          
                   
                    { {:phone}}

运行结果

4. {

{for ...}}遍历数组和对象，他会自动遍历第一层的内容。可以看前面1、{
{：}}，输出数据的介绍。

{

{for··}}遍历多层数据

<%@ page contentType="text/html;charset=UTF-8" language="java" %>    测试  <%@ include file="/global/commonPage/includeHead/head.jsp" %>  
    
       
     
      
         
       
            
        
                     
         
          门店名称        
          
           门店地址        
           
            订单人姓名        
            
             订单人电话        
             
              产品价格        
              
               产品数量        
               
                支付金额            
                
                       <%--定义jsrender模板--%>
                 
                   
                  
                   { {:anmont.pay}}
                   
                           
                    
                     { {:storeName}}          
                     
                      { {:storeAdress}}          { {for cont}}          
                      
                       { {:productName}}          
                       
                        { {:productPhone}}           { {for orderDaties}}                
                        
                         { {:amont}}                
                         
                          { {:productNum}}                
                          
                           { {:productPrice}}        { {/for}}        { {/for}}

运行结果

5. 条件表达式{

{if··}}，用于渲染数据表达式为true时的模板. 一般用于如下几种情况：

1) {

{if pathOrExpr}}...{

{/if}} 用于渲染满足条件的内容。

2) {

{if pathOrExpr tmpl=nameOrExpr /}}用于渲染外部包含的模板。

3) {

{if ...}}...{

{else}}...{

{/if}}

{

{if pathOrExpr}...{

{else}}...{

{/if}}

{

{if pathOrExpr1 tmpl=nameOrExpr1 }}{

{else tmpl=nameOrExpr2 }}{

{/if}}

4) {

{if ....}}...{

{else ...}}...{

{else}}...{

{/if}}

{

{if pathOrExpr1}}...{

{else pathOrExpr2}}...{

{else}}...{

{/if}

列：

<%@ page contentType="text/html;charset=UTF-8" language="java" %>    测试  <%@ include file="/global/commonPage/includeHead/head.jsp" %>  
    
       
     
      
         
       
            
        
                     
         
          姓名        
          
           性别        
           
            薪资            
            
                   <%--定义jsrender模板--%>
             
                 { {if pay > 10000}}      
              
                       { {else}}      
               
                    { {/if}}          
                
                 { {:#getIndex()}}:{ {:name}}          
                 
                  { {:sex}}          
                  
                   { {>pay}}

运行结果：

还有一些其他的条件表达式：

表达式	举例	注释
\|\|	{ { :a \|\| b }}	或
&&	{ { :a && b }}	且
!	{ { :!a }}	非
<= 和>=和 <和 >	{ { :a <= b }}	比较
=== 和 !==	{ { :a === b }}	等于和不等于