Home > Web Front-end > JS Tutorial > JavaScript template engine JsRender usage guide based on jQuery_jquery

JavaScript template engine JsRender usage guide based on jQuery_jquery

WBOY
Release: 2016-05-16 16:23:34
Original
1387 people have browsed it

Foreword

JsRender is a JavaScript template engine based on jQuery. It has the following characteristics:

· Simple and intuitive

· Powerful functions

· Extensible

· Fast as lightning

These features look very powerful, but almost every template engine will promote them like this. . .

Due to work needs, Xiaocai came into contact with this template engine. After using it for a while, I found that it is indeed relatively powerful, but Xiaocai feels that some parts are too powerful, which makes it difficult to understand.

On the other hand, the official documentation of JsRender is relatively detailed, but there is surprisingly little other information. If you encounter any problems, you basically can’t find them. Not only can’t you find related issues, but there are almost no results.

In addition, some parts of JsRender are really difficult to understand, so Xiaocai urgently needs to share some "best practices".

Based on recent use, Xiaocai has summarized some practical experiences. Of course, these experiences cannot be found in official documents.

Note: This article is not a basic introductory tutorial. The following examples have their own annotations. No excessive explanation is given. Readers can experience it by themselves. If you don’t understand, you can leave a message.

Nested loops use #parent to access parent data (not recommended)

Copy code The code is as follows:

 
 
  
    
     嵌套循环使用#parent访问父级数据 --- by 杨元
    
  

  
    

      
        
          
            
            
            
          
        
        
        
      
序号姓名家庭成员

    

    
    
    
    
     <script><br>        //数据源<br>        var dataSrouce = [{<br>          name: "张三",<br>          family: [<br>            "爸爸",<br>            "妈妈",<br>            "哥哥"<br>          ]<br>        },{<br>          name: "李四",<br>          family: [<br>            "爷爷",<br>            "奶奶",<br>            "叔叔"<br>          ]<br>        }];<br>        //渲染数据<br>        var html = $("#testTmpl").render(dataSrouce);<br>        $("#list").append(html);<br>      </script>
  
 

Nested loops use parameters to access parent data (recommended)

Copy code The code is as follows:





Nested loops use parameters to access parent data --- by Yang Yuan




                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  
                                                                                                      
                                                                                                  





<script><br> //Data source<br> var dataSrouce = [{<br>            name: "张三",<br>           family: [<br> "Dad",<br> "Mom",<br> "Brother"<br> ]<br> },{<br>            name: "李思",<br>           family: [<br> "Grandpa",<br> "Grandma",<br> "Uncle"<br> ]<br> }];<br> //Rendering data<br>       var html = $("#testTmpl").render(dataSrouce);<br> ​​​​ $("#list").append(html);<br> </script>



Use else in custom tag (strongly not recommended)

Copy code The code is as follows:

 
 
  
    
     自定义标签中使用else --- by 杨元
    
  

  
    

      
        
          
            
            
          
        
        
        
      
名称单价

    





<script><br> //Data source<br> var dataSrouce = [{<br>           name: "Apple",<br> Price: 108<br> },{<br>           name: "Yali",<br> Price: 370<br> },{<br>            name: "peach",<br> Price: 99<br> },{<br>           name: "pineapple",<br> Price: 371<br> },{<br>           name: "orange",<br> price: 153<br> }];<br> //Custom tag<br> $.views.tags({<br> "isShow": function(price){<br>             var temp=price ''.split('');<br> If(this.tagCtx.props.status === 0){<br>                         // Determine whether the price is the number of daffodils, if so, display it, otherwise do not display it <br> if(price==(Math.pow(parseInt(temp[0],10),3) Math.pow(parseInt(temp[1],10),3) Math.pow(parseInt(temp[2],10 ),3))){<br>                    return this.tagCtxs[0].render();<br>                 }else{<br>                    return this.tagCtxs[1].render();<br>             }<br>               }else{<br>               return "";<br>            }<br>          }<br> });<br> //Rendering data<br>       var html = $("#testTmpl").render(dataSrouce);<br> ​​​​ $("#list").append(html);<br> </script>






Use helper instead of custom tag (recommended)

Copy code

The code is as follows:

 
 
  
    
     用helper代替自定义标签 --- by 杨元
    
  

  
    

      
        
          
            
            
          
        
        
        
      
名称单价

    





<script><br> //Data source<br> var dataSrouce = [{<br>           name: "Apple",<br> Price: 108<br> },{<br>           name: "Yali",<br> Price: 370<br> },{<br>            name: "peach",<br> Price: 99<br> },{<br>           name: "pineapple",<br> Price: 371<br> },{<br>           name: "orange",<br> price: 153<br> }];<br> ​​​ //Helper<br> $.views.helpers({<br> "isShow": function(price){<br>             var temp=price ''.split('');<br> if(price==(Math.pow(parseInt(temp[0],10),3) Math.pow(parseInt(temp[1],10),3) Math.pow(parseInt(temp[2],10 ),3))){<br>               return true;<br>               }else{<br>                return false;<br>            }<br>          }<br> });<br> //Rendering data<br>       var html = $("#testTmpl").render(dataSrouce);<br> ​​​​ $("#list").append(html);<br> </script>





Demo code package download:
http://xiazai.jb51.net/201412/yuanma/JsRender_Demo(jb51.net).rar
Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template