JsRender tutoriel d'introduction pratique_compétences javascript

Cet article est un tutoriel d'introduction pratique à JsRender. Des exemples décrivent l'utilisation de balises else, de boucles imbriquées pour accéder aux données parents et à d'autres points de connaissances. Partagez-le avec tout le monde pour votre référence. Les détails sont les suivants :

Avant-propos

JsRender est un moteur de template JavaScript basé sur jQuery Il possède les fonctionnalités suivantes :

· Simple et intuitif

· Fonction puissante

· Extensible

· Rapide comme l'éclair

Ces fonctionnalités semblent très puissantes, mais presque tous les moteurs de modèles les promouvront de cette manière. . .

En raison de besoins professionnels, Xiaocai est entré en contact avec ce moteur de modèles. Après l'avoir utilisé pendant un certain temps, j'ai trouvé qu'il était effectivement relativement puissant, mais Xiaocai estime que certaines parties sont trop puissantes, ce qui le rend difficile à comprendre.

D'un autre côté, la documentation officielle de JsRender est relativement détaillée, mais il y a étonnamment peu d'autres informations. Si vous rencontrez des problèmes, vous ne pouvez pratiquement pas les trouver. il n'y a presque aucun résultat.

De plus, certaines parties de JsRender sont vraiment difficiles à comprendre, donc Xiaocai doit de toute urgence partager quelques « bonnes pratiques ».

Sur la base d'une utilisation récente, Xiaocai a résumé quelques expériences pratiques. Bien entendu, ces expériences ne peuvent pas être trouvées dans les documents officiels.

Les boucles imbriquées utilisent #parent pour accéder aux données parent (non recommandé)

Copier le code Le code est le suivant :

 
   
   
   
   
 
 
   
   

     
       
         
            序号
            姓名
            家庭成员
         
       
       
         
       
     
   

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

Les boucles imbriquées utilisent des paramètres pour accéder aux données parent (recommandé)

Copier le code Le code est le suivant :

 


 

                                                                                                                                                                                                                                                                                                                                                                                                   numéro de série< /th>
                                                                                                                                                                                                                                                                                                                                                                                                 
          
                                                                                                                                                            

 


 


 
<script><br> //Source des données<br> var dataSrouce = [{<br>          nom : "张三",<br> famille : [<br> "Papa",<br> "Maman",<br> "Frère"<br> ]<br> },{<br>           nom : "李思",<br> famille : [<br> "Grand-père",<br> "Grand-mère",<br> "Oncle"<br> ]<br> }];<br>        <br> //Rendu des données<br>       var html = $("#testTmpl").render(dataSrouce);<br> ​​​ $("#list").append(html);<br>        <br> </script>
 

Utiliser else dans la balise personnalisée (fortement déconseillé)

Copier le code Le code est le suivant :

 
   
   
   
   
 
 
   
   

     
       
         
           
           
         
       
       
         
       
     

名称	单价

   

 


 


 
<script><br> //Source des données<br> var dataSrouce = [{<br>          nom : "Pomme",<br> Prix ​​: 108<br> },{<br> nom : "Yali",<br> Prix ​​: 370<br> },{<br>                                                                                                                                                                                      . Prix ​​: 99<br> },{<br>          nom : "Ananas",<br> Prix ​​: 371<br> },{<br>           nom : "orange",<br> Prix ​​: 153<br> }];<br>        <br> //Balise personnalisée<br> $.views.tags({<br> "isShow": fonction(prix){<br>              var temp=price ''.split('');<br>                                                                          Si(this.tagCtx.props.status === 0){<br>                          // Déterminer si le prix correspond au nombre de jonquilles, si oui, affichez-le, sinon ne l'affichez pas <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>                }autre{<br>                 return this.tagCtxs[1].render();<br>             }<br>             }autre{<br>              return "";<br>           }<br>                                                                          ><br> });<br>        <br> <br> //Données de rendu<br>       var html = $("#testTmpl").render(dataSrouce);<br> ​​​ $("#list").append(html);<br>         </script>

 





Utilisez l'assistance au lieu des balises personnalisées (recommandé)

Copier le code

Le code est le suivant :

 
   
   
   
   
 
 
   
   

     
       
         
           
           
         
       
       
         
       
     

名称	单价

   

 


 


 
<script><br> //Source des données<br> var dataSrouce = [{<br>          nom : "Pomme",<br> Prix ​​: 108<br> },{<br> nom : "Yali",<br> Prix ​​: 370<br> },{<br>                                                                                                                                                                                      . Prix ​​: 99<br> },{<br>          nom : "Ananas",<br> Prix ​​: 371<br> },{<br>           nom : "orange",<br> Prix ​​: 153<br> }];<br>        <br> //Aide<br> $.views.helpers({<br> "isShow": fonction(prix){<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>             }autre{<br>               return false ;<br>           }<br> ><br> });<br> <br> //Données de rendu<br>       var html = $("#testTmpl").render(dataSrouce); ​​​ $("#list").append(html);<p>        <br> </script>
 





Cliquez ici pour l'exemple de code complet

Téléchargez depuis ce site.

J'espère que cet article sera utile à tout le monde pour apprendre la programmation JsRender.