Dieser Artikel beschreibt den JSRender für den Indexschleifenindex. Teilen Sie es für Ihre Referenz. Die spezifische Analyse ist wie folgt:
Jsredner und JSViews (JSViews ist eine weitere Kapselung, die auf JSRender basiert) werden als nächste Generation von JQuery -Vorlagen bezeichnet, die offizielle Adresse:
https://github.com/borismoore/jsrender;
https://github.com/borismoore/jsviews.
Schleifen sind ein wesentlicher Bestandteil der Template -Engine, und wenn es um Schleifen geht, wird ein entscheidender Faktor eingeführt: Indexierung.
Der sogenannte Index ist die Anzahl der Schleifen. Durch den Index können Sie die aktuelle Schleife erhalten, wie oft er ist.
Wenn die Leser das offizielle Dokument gelesen haben, sehen sie die folgenden Möglichkeiten, um den Index zu erhalten:
Daten:
Kopieren Sie den Code wie folgt: {
Namen: ["Maradona", "Pele", "Ronaldo", "Messi"]
}
Vorlage Markup:
Kopieren Sie den Code wie folgt: {{für Namen}}
<div>
<b> {{: #index+1}}. </b>
<span> {{: #data}} </span>
</div>
{{/für}}
Ergebnis:
Kopieren Sie den Code wie folgt: 1. Maradona
2. Pele
3. Ronaldo
4. Messi
Der Index kann in der Schleife von einem speziellen buchstäblichen #Index erhalten werden, der dem entspricht, und in diesem Fall den einzelnen Namen darstellt.
Lassen Sie uns als nächstes einige Tricks und das obige Beispiel erstellen, aber diesmal hoffe ich, nur Namen anzuzeigen, beginnend mit M:
Daten:
Kopieren Sie den Code wie folgt: {
Namen: ["Maradona", "Pele", "Ronaldo", "Messi"]
}
Vorlage Markup:
Kopieren Sie den Code wie folgt: {{für Namen}}
{{if #data.indexof ("m") == 0}}
<div>
<b> {{: #index+1}}. </b>
<span> {{: #data}} </span>
</div>
{{/Wenn}}
{{/für}}
Ergebnis:
Kopieren Sie den Code wie folgt: Nicht verfügbar (verschachtelte Ansicht): Verwenden Sie #getIndex () 1. Maradona
Nicht verfügbar (verschachtelte Ansicht): Verwenden Sie #getIndex () 1. Messi
Ich habe einfach ein If -Urteil hinzugefügt und es hat tatsächlich einen Fehler gemeldet!
Das Problem liegt in #Index. Die Fehlermeldung ist sehr klar. Sie können #getIndex () anstelle von #index verwenden.
Probieren Sie den ersetzten Code aus:
Daten:
Kopieren Sie den Code wie folgt: {
Namen: ["Maradona", "Pele", "Ronaldo", "Messi"]
}
Vorlage Markup:
Kopieren Sie den Code wie folgt: {{für Namen}}
{{if #data.indexof ("m") == 0}}
<div>
<b> {{: #getIndex ()+1}}. </b>
<span> {{: #data}} </span>
</div>
{{/Wenn}}
{{/für}}
Ergebnis:
Kopieren Sie den Code wie folgt: 1. Maradona
4. Messi
Warum ist das? Einfach ausgedrückt, obwohl {{wenn}} keinen regulären Datenbereich erstellt, stört es jedoch den versteckten Bereich. Das heißt, {{if}} blockiert nicht die Sichtbarkeit regulärer Daten (die Daten, die Sie übergeben), sondern stört die Sichtbarkeit versteckter Daten (#index, #Parent). Dies ist ein einfaches Verständnis, und es besteht keine Notwendigkeit, sich darauf einzulassen, da dies nur ein Fehler dieses Gerüsts ist, kein Standard.
Daher gibt dieser Artikel den Lesern eine wichtige Schlussfolgerung: Versuchen Sie, #GetIndex () zu verwenden, um den Index zu erhalten und #Index zu vermeiden, es sei denn, Ihre Anwendung ist einfach genug.
Ich hoffe, dieser Artikel wird für das Lernen eines JSRender aller hilfreich sein.