JavaScript template engine JsRender usage guide based on jQuery_jquery

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:

 
 
  
    
    
    
  
  
    

      
        
          
            
            
            
          
        
        
        
      

序号	姓名	家庭成员

    

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

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  
                                                                                                      
                                                                                                  





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

 
 
  
    
    
    
  
  
    

      
        
          
            
            
          
        
        
        
      

名称	单价

    

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

 
 
  
    
    
    
  
  
    

      
        
          
            
            
          
        
        
        
      

名称	单价

    

<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