JsRender practical introductory tutorial_javascript skills

This article is a practical introductory tutorial for JsRender. Examples describe the use of tag else, nested loops to access parent data and other knowledge points. Share it with everyone for your reference. The details are as follows:

Foreword

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

· Simple and intuitive

· Powerful function

· Extensible

· Fast as lightning

These features seem 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 relevant 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.

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 />       //渲染数据<br />       var html = $("#testTmpl").render(dataSrouce);<br />       $("#list").append(html);<br />       <br />     </script>
   
 

Nested loops use parameters to access parent data (recommended)

Copy code The code is as follows:

 


 

                                                                                                                                                                                                                                                                                                                                                                                                                    
                                                                                                                                                                                                                                                                                                                                                                                                                                       
          
                                                                                                                                                                   

serial number

 


 


 
<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 />        <br /> //Rendering data<br />       var html = $("#testTmpl").render(dataSrouce);<br /> ​​​ $("#list").append(html);<br />        <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 />                                                                                                                                                                                       . Price: 99<br /> },{<br />          name: "Pineapple",<br /> Price: 371<br /> },{<br />           name: "orange",<br /> Price: 153<br /> }];<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 />        <br /> <br /> //Rendering data<br />       var html = $("#testTmpl").render(dataSrouce);<br /> ​​​ $("#list").append(html);<br />         </script>

 





Use helper instead of custom tags (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 />                                                                                                                                                                                       . Price: 99<br /> },{<br />          name: "Pineapple",<br /> Price: 371<br /> },{<br />           name: "orange",<br /> Price: 153<br /> }];<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 /> <br /> //Rendering data<br />       var html = $("#testTmpl").render(dataSrouce); ​​​ $("#list").append(html);<p>        <br /> </script>
 





Click here for the complete example code

Download from this site.

I hope this article will be helpful to everyone’s learning of JsRender programming.