JsRender praktisches Einführungs-Tutorial_Javascript-Kenntnisse

Dieser Artikel ist ein praktisches Einführungs-Tutorial zu JsRender. Beispiele beschreiben die Verwendung von Tags else, verschachtelten Schleifen für den Zugriff auf übergeordnete Daten und andere Wissenspunkte. Teilen Sie es als Referenz mit allen. Die Details lauten wie folgt:

Vorwort

JsRender ist eine auf jQuery basierende JavaScript-Vorlagen-Engine. Sie verfügt über die folgenden Funktionen:

· Einfach und intuitiv

· Leistungsstarke Funktion

· Erweiterbar

· Blitzschnell

Diese Funktionen scheinen sehr leistungsfähig zu sein, 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 Aspekte von JsRender tatsächlich schwer zu verstehen, sodass Xiaocai dringend einige „Best Practices“ teilen muss.

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

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

 
   
   
   
   
   
 

 
   
   

     
       
         
            序号
            姓名
            家庭成员
         
       
       
         
       
     
   

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

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

 

 

                                                                                                                                                                                & Lt; th width = "10%" & gt; Seriennummer & lt;/th & gt;                                                                                                                                                                                                                                                                                                             Familienmitglieder
                                                                                                        
          
                                                                                                                                                                 

 


 


 
<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>        <br> //Daten rendern<br>     var html = $("#testTmpl").render(dataSrouce);<br> ​​​ $("#list").append(html);<br>        <br> </script>
 

Andere Elemente im benutzerdefinierten Tag verwenden (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>                                                                                                                                                                               . Preis: 99<br> },{<br>           Name: „Ananas“,<br> Preis: 371<br> },{<br>           Name: „orange“,<br> Preis: 153<br> }];<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>                }sonst{<br>                 return this.tagCtxs[1].render();<br>             }<br>             }sonst{<br>              return "";<br>           }<br>                                                                             }<br> });<br>        <br> <br> //Daten rendern<br>     var html = $("#testTmpl").render(dataSrouce);<br> ​​​ $("#list").append(html);<br>         </script>

 





Hilfsprogramm statt benutzerdefinierter 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>                                                                                                                                                                               . Preis: 99<br> },{<br>           Name: „Ananas“,<br> Preis: 371<br> },{<br>           Name: „orange“,<br> Preis: 153<br> }];<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> <br> //Daten rendern<br>     var html = $("#testTmpl").render(dataSrouce); ​​​ $("#list").append(html);<p>        <br> </script>
 





Klicken Sie hier für den vollständigen Beispielcode

Download von dieser Website.

Ich hoffe, dass dieser Artikel jedem beim Erlernen der JsRender-Programmierung hilfreich sein wird.