JsRender-Nutzungshandbuch für die JavaScript-Vorlagen-Engine basierend auf jQuery_jquery

Vorwort

JsRender ist eine auf jQuery basierende JavaScript-Vorlagen-Engine. Sie weist die folgenden Eigenschaften auf:

· Einfach und intuitiv

· Leistungsstarke Funktionen

· Erweiterbar

· Blitzschnell

Diese Funktionen sehen sehr leistungsstark aus, aber fast jede Template-Engine bewirbt sie auf diese Weise. . .

Aufgrund beruflicher Anforderungen kam Xiaocai mit dieser Template-Engine in Kontakt. Nachdem ich es eine Weile benutzt hatte, stellte ich fest, dass es tatsächlich relativ mächtig ist, aber Xiaocai hat das Gefühl, dass einige Teile zu mächtig sind, was das Verständnis erschwert.

Andererseits ist die offizielle Dokumentation von JsRender relativ detailliert, aber es gibt überraschend wenig andere Informationen. Wenn Sie auf Probleme stoßen, können Sie diese nicht nur nicht finden, sondern auch Es gibt fast keine Ergebnisse.

Darüber hinaus sind einige Teile von JsRender wirklich schwer zu verstehen, sodass Xiaocai dringend einige „Best Practices“ teilen muss.

Auf der Grundlage der jüngsten Verwendung hat Xiaocai einige praktische Erfahrungen zusammengefasst. Diese Erfahrungen sind natürlich nicht in offiziellen Dokumenten zu finden.

Hinweis: Bei diesem Artikel handelt es sich nicht um ein einfaches Einführungstutorial. Die folgenden Beispiele enthalten keine ausführlichen Erläuterungen. Wenn Sie es nicht verstehen, können Sie eine Nachricht hinterlassen.

Verschachtelte Schleifen verwenden #parent, um auf übergeordnete Daten zuzugreifen (nicht empfohlen)

Code kopieren Der Code lautet wie folgt:

 
 
  
    
    
    
    
  
  
    

      
        
          
             序号
             姓名
             家庭成员
          
        
        
        
      
    

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

Verschachtelte Schleifen verwenden Parameter, um auf übergeordnete Daten zuzugreifen (empfohlen)

Code kopieren Der Code lautet wie folgt:

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       
                                                                                                  
                                                                                              

<script><br> //Datenquelle<br> var dataSrouce = [{<br>            Name: „张三“,<br>           Familie: [<br> „Papa“,<br> „Mama“,<br> „Bruder“<br> ]<br> },{<br>            Name: „李思“,<br>           Familie: [<br> „Opa“,<br> „Oma“,<br> „Onkel“<br> ]<br> }];<br> //Daten rendern<br>       var html = $("#testTmpl").render(dataSrouce);<br> ​​​​ $("#list").append(html);<br> </script>

Verwenden Sie else im benutzerdefinierten Tag (dringend nicht empfohlen)

Code kopieren Der Code lautet wie folgt:

 
 
  
    
    
    
  
  
    

      
        
          
            
            
          
        
        
        
      

名称	单价

    

<script><br> //Datenquelle<br> var dataSrouce = [{<br>           Name: „Apple“,<br> Preis: 108<br> },{<br>           Name: „Yali“,<br> Preis: 370<br> },{<br>            Name: „Pfirsich“,<br> Preis: 99<br> },{<br>           Name: „Ananas“,<br> Preis: 371<br> },{<br>           Name: „orange“,<br> Preis: 153<br> }];<br> //Benutzerdefiniertes Tag<br> $.views.tags({<br> „isShow“: Funktion(Preis){<br>             var temp=price ''.split('');<br> If(this.tagCtx.props.status === 0){<br>                         // Bestimmen Sie, ob der Preis der Anzahl der Narzissen entspricht. Wenn ja, zeigen Sie ihn an, andernfalls zeigen Sie ihn nicht an <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>               }sonst{<br>               return "";<br>            }<br>          }<br> });<br> //Daten rendern<br>       var html = $("#testTmpl").render(dataSrouce);<br> ​​​​ $("#list").append(html);<br> </script>






Helfer anstelle des benutzerdefinierten Tags verwenden (empfohlen)

Code kopieren

Der Code lautet wie folgt:

 
 
  
    
    
    
  
  
    

      
        
          
            
            
          
        
        
        
      

名称	单价

    

<script><br> //Datenquelle<br> var dataSrouce = [{<br>           Name: „Apple“,<br> Preis: 108<br> },{<br>           Name: „Yali“,<br> Preis: 370<br> },{<br>            Name: „Pfirsich“,<br> Preis: 99<br> },{<br>           Name: „Ananas“,<br> Preis: 371<br> },{<br>           Name: „orange“,<br> Preis: 153<br> }];<br> ​​​ //Helfer<br> $.views.helpers({<br> „isShow“: Funktion(Preis){<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>               }sonst{<br>                return false;<br>            }<br>          }<br> });<br> //Daten rendern<br>       var html = $("#testTmpl").render(dataSrouce);<br> ​​​​ $("#list").append(html);<br> </script>





Download des Demo-Code-Pakets:
http://xiazai.jb51.net/201412/yuanma/JsRender_Demo(jb51.net).rar