Cet article décrit l'index JSRender pour l'index. Partagez-le 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, l'adresse officielle:
https://github.com/borismoore/jsrender;
https://github.com/borismoore/jsviews.
Les boucles sont une partie essentielle du moteur de modèle, et en ce qui concerne les boucles, un facteur crucial est introduit: l'indexation.
Le soi-disant index est le nombre de boucles. Grâce à l'index, vous pouvez obtenir la boucle actuelle combien de fois elle est.
Si les lecteurs ont lu le document officiel, ils verront les moyens suivants d'obtenir l'index:
données:
Copiez le code comme suit: {
Noms: ["Maradona", "Pele", "Ronaldo", "Messi"]
}
Marquage du modèle:
Copiez le code comme suit: {{pour les noms}}
<div>
<b> {{: # index + 1}}. </b>
<span> {{: #data}} </span>
</div>
{{/pour}}
résultat:
Copiez le code comme suit: 1. Maradona
2. Pelé
3. Ronaldo
4. Messi
L'index peut être obtenu dans la boucle par un #Index littéral spécial, ce qui est équivalent à cela, et dans ce cas représente chaque nom.
Ensuite, faisons quelques astuces, et l'exemple ci-dessus, mais cette fois, j'espère afficher uniquement les noms en commençant par m:
données:
Copiez le code comme suit: {
Noms: ["Maradona", "Pele", "Ronaldo", "Messi"]
}
Marquage du modèle:
Copiez le code comme suit: {{pour les noms}}
{{if # data.indexof ("m") == 0}}
<div>
<b> {{: # index + 1}}. </b>
<span> {{: #data}} </span>
</div>
{{/si}}
{{/pour}}
résultat:
Copiez le code comme suit: Inconvalenable (vue imbriquée): utilisez #getIndex () 1. Maradon
Inconvénienable (vue imbriquée): utilisez #getIndex () 1. Messi
J'ai simplement ajouté un jugement si et cela a en fait signalé une erreur!
Le problème réside dans #Index. Le message d'erreur est très clair. Vous pouvez utiliser #getIndex () au lieu de #Index.
Essayez le code remplacé:
données:
Copiez le code comme suit: {
Noms: ["Maradona", "Pele", "Ronaldo", "Messi"]
}
Marquage du modèle:
Copiez le code comme suit: {{pour les noms}}
{{if # data.indexof ("m") == 0}}
<div>
<b> {{: #getIndex () + 1}}. </b>
<span> {{: #data}} </span>
</div>
{{/si}}
{{/pour}}
résultat:
Copiez le code comme suit: 1. Maradona
4. Messi
Pourquoi est-ce? En termes simples, c'est parce que bien que {{si}} ne crée pas de portée de données régulière, il interfère avec la portée cachée. Autrement dit, {{if}} ne bloquera pas la visibilité des données régulières (les données que vous transmettez), mais interfèrent avec la visibilité des données cachées (#Index, #parent). C'est une compréhension simple, et il n'est pas nécessaire d'y entrer, car ce n'est qu'un défaut de ce cadre, pas une norme.
Par conséquent, cet article donne aux lecteurs une conclusion importante: essayez d'utiliser #getIndex () pour obtenir l'index et éviter d'utiliser #Index, sauf si votre application est assez simple.
J'espère que cet article sera utile à l'apprentissage de JSRender de tous.