Explication détaillée de JsRender pour l'utilisation de l'index de boucle d'index

L'exemple de cet article décrit l'utilisation de JsRender pour l'index de boucle d'index. Partagez-le avec tout le monde pour votre référence. L'analyse spécifique est la suivante :

JsRedner et JsViews (JsViews est une autre encapsulation basée sur JsRender) sont appelés la prochaine génération de modèles Jquery, adresse officielle :

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

La boucle est une partie essentielle du moteur de template, et parler de boucles mènera à un facteur crucial : l'index.

Le soi-disant index est le nombre de cycles. Grâce à l'index, vous pouvez obtenir le nombre de fois que le cycle en cours est effectué.

Si les lecteurs ont lu la documentation officielle, ils verront la méthode suivante pour obtenir l'index :

données :

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

balisage du modèle :

{{for names}}

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

{{/for}}

résultat :

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

L'index peut être obtenu via le littéral spécial #index dans la boucle Le littéral spécial #data est équivalent à ceci, qui. dans ce cas représente chaque nom.

Ensuite, faisons une petite astuce, toujours l'exemple ci-dessus, mais cette fois je souhaite afficher uniquement les noms commençant par M :

data:

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

balisage du modèle :

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

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

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

résultat :

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

J'ai simplement ajouté un jugement if, mais une erreur a été signalée !

Le problème réside dans #index. Le message d'erreur est très clair, vous demandant d'utiliser #getIndex() au lieu de #index.

Essayez le code remplacé :

données :

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

balisage du modèle :

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

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

résultat :

1. Maradona
4. Messi

Pourquoi ça ? En termes simples, c'est parce que même si {{if }} ne crée pas de portée de données régulière, il interfère avec la portée cachée. En d'autres termes, {{if }} ne bloquera pas la visibilité des données normales (les données que vous transmettez), mais interférera avec la visibilité des données cachées (#index, #parent). Il s’agit d’une compréhension simple, et il n’est pas nécessaire d’entrer dans les détails, car il ne s’agit que d’un défaut de ce cadre, et non d’une norme.

Par conséquent, cet article donne aux lecteurs une conclusion très importante : essayez d'utiliser #getIndex() pour obtenir l'index, et évitez d'utiliser #index à moins que votre application ne soit suffisamment simple.

J'espère que ce chapitre sera utile à tout le monde pour apprendre JsRender. Pour plus de didacticiels connexes, veuillez visiter le Tutoriel vidéo jQuery !