Detaillierte Erläuterung von JsRender für die Verwendung von Indexschleifenindizes

Das Beispiel in diesem Artikel beschreibt die Verwendung von JsRender für den Indexschleifenindex. Teilen Sie es als Referenz mit allen. Die spezifische Analyse lautet wie folgt:

JsRedner und JsViews (JsViews ist eine weitere Kapselung basierend auf JsRender) werden als die nächste Generation von JQuery-Vorlagen bezeichnet, offizielle Adresse:

https:/ /github .com/BorisMoore/jsrender;
https://github.com/BorisMoore/jsviews.

Schleife ist ein wesentlicher Bestandteil der Template-Engine, und wenn man über Schleifen spricht, kommt man auf einen entscheidenden Faktor: den Index.

Der sogenannte Index ist die Anzahl der Zyklen. Durch den Index können Sie die Anzahl der aktuellen Zyklen ermitteln.

Wenn Leser die offizielle Dokumentation gelesen haben, sehen sie die folgende Methode zum Erhalten des Index:

Daten:

{
   names: ["Maradona","Pele","Ronaldo","Messi"]
}

Vorlagen-Markup:

{{for names}}

{{: #index+1}}.
{{: #data}}

{{/for}}

Ergebnis:

1. Maradona
2. Pele
3. Ronaldo
4. Mess

Der Index kann über das spezielle Literal #index in der Schleife erhalten werden. Das spezielle Literal #data entspricht diesem stellt in diesem Fall jeden Namen dar.

Als nächstes machen wir einen kleinen Trick, immer noch das obige Beispiel, aber dieses Mal möchte ich nur Namen anzeigen, die mit M beginnen:

Daten:

{
 names: ["Maradona","Pele","Ronaldo","Messi"]
}

Vorlagen-Markup :

{{for names}}
   {{if #data.indexOf("M") == 0}}
    

       {{: #index+1}}.
       {{: #data}}
    

   {{/if}}
 {{/for}}

Ergebnis:

Unavailable (nested view): use #getIndex()1. Maradona
Unavailable (nested view): use #getIndex()1. Messi

Ich habe einfach ein if-Urteil hinzugefügt, aber es wurde ein Fehler gemeldet!

Das Problem liegt in #index. Die Fehlermeldung ist sehr klar und fordert Sie auf, #getIndex() anstelle von #index zu verwenden.

Probieren Sie den ersetzten Code aus:

Daten:

{
 names: ["Maradona","Pele","Ronaldo","Messi"]
}

Vorlagen-Markup:

{{for names}}
   {{if #data.indexOf("M") == 0}}
    
       {{: #getIndex()+1}}.
       {{: #data}}
    

   {{/if}}
 {{/for}}

Ergebnis:

1. Maradona
4. Messi

Warum ist das so? Einfach ausgedrückt liegt es daran, dass {{if }} zwar keinen regulären Datenbereich erstellt, aber den verborgenen Bereich beeinträchtigt. Das heißt, {{if }} blockiert nicht die Sichtbarkeit regulärer Daten (die von Ihnen übergebenen Daten), beeinträchtigt jedoch die Sichtbarkeit versteckter Daten (#index, #parent). Dies ist ein einfaches Verständnis, und es besteht keine Notwendigkeit, auf Details einzugehen, da dies nur ein Fehler dieses Frameworks und kein Standard ist.

Daher liefert dieser Artikel den Lesern eine sehr wichtige Schlussfolgerung: Versuchen Sie, #getIndex() zu verwenden, um den Index abzurufen, und vermeiden Sie die Verwendung von #index, es sei denn, Ihre Anwendung ist einfach genug.

Ich hoffe, dass dieses Kapitel für alle hilfreich ist, um JsRender zu lernen. Weitere verwandte Tutorials finden Sie unter jQuery-Video-Tutorial!