Guide d'utilisation du moteur de modèles JavaScript JsRender basé sur jQuery_jquery

Avant-propos

JsRender est un moteur de template JavaScript basé sur jQuery Il présente les caractéristiques suivantes :

· Simple et intuitif

· Fonctions puissantes

· 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.

Remarque : cet article n'est pas un didacticiel d'introduction de base. Les exemples suivants ont leurs propres annotations. Aucune explication excessive n'est donnée. Si vous ne comprenez pas, vous pouvez laisser un message.

Les boucles imbriquées utilisent #parent pour accéder aux données parentales (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>        var html = $("#testTmpl").render(dataSrouce);<br>        $("#list").append(html);<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 :

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       
                                                                                                  
                                                                                              

<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> //Rendu des données<br>       var html = $("#testTmpl").render(dataSrouce);<br> ​​​​ $("#list").append(html);<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>            nom : "pêche",<br> Prix ​​: 99<br> },{<br>           nom : "ananas",<br> Prix ​​: 371<br> },{<br>           nom : "orange",<br> prix : 153<br> }];<br> //Balise personnalisée<br> $.views.tags({<br> "isShow": fonction(prix){<br>             var temp=prix ''.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>                    renvoie this.tagCtxs[0].render();<br>                 }autre{<br>                    renvoie this.tagCtxs[1].render();<br>             }<br>               }autre{<br>               return "";<br>            }<br>          }<br> });<br> //Rendu des données<br>       var html = $("#testTmpl").render(dataSrouce);<br> ​​​​ $("#list").append(html);<br> </script>






Utiliser l'assistant au lieu de la balise personnalisée (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>            nom : "pêche",<br> Prix ​​: 99<br> },{<br>           nom : "ananas",<br> Prix ​​: 371<br> },{<br>           nom : "orange",<br> prix : 153<br> }];<br> ​​​ //Aide<br> $.views.helpers({<br> "isShow": fonction(prix){<br>             var temp=prix ''.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> //Rendu des données<br>       var html = $("#testTmpl").render(dataSrouce);<br> ​​​​ $("#list").append(html);<br> </script>





Téléchargement du package de codes de démonstration :
http://xiazai.jb51.net/201412/yuanma/JsRender_Demo(jb51.net).rar