Este artículo describe el JSRender para el índice del Índice. Compártelo para su referencia. El análisis específico es el siguiente:
JSredner y JSViews (JSViews es otra encapsulación basada en JSRender) se denominan la próxima generación de plantillas de jQuery, la dirección oficial:
https://github.com/borismoore/jsrender;
https://github.com/borismoore/jsviews.
Los bucles son una parte esencial del motor de plantilla, y cuando se trata de bucles, se introduce un factor crucial: indexación.
El llamado índice es el número de bucles. A través del índice, puede obtener el bucle actual cuántas veces es.
Si los lectores han leído el documento oficial, verán las siguientes formas de obtener el índice:
datos:
Copie el código de la siguiente manera: {
Nombres: ["Maradona", "Pelé", "Ronaldo", "Messi"]
}
Marca de plantilla:
Copie el código de la siguiente manera: {{para nombres}}
<div>
<b> {{: #index+1}}. </b>
<span> {{: #data}} </span>
</div>
{{/para}}
resultado:
Copie el código de la siguiente manera: 1. Maradona
2. Pelé
3. Ronaldo
4. Messi
El índice se puede obtener en el bucle mediante un #Index literal especial, que es equivalente a esto, y en este caso representa cada nombre.
A continuación, hagamos algunos trucos y el ejemplo anterior, pero esta vez espero mostrar solo nombres que comienzan con M:
datos:
Copie el código de la siguiente manera: {
Nombres: ["Maradona", "Pelé", "Ronaldo", "Messi"]
}
Marca de plantilla:
Copie el código de la siguiente manera: {{para nombres}}
{{if #data.indexof ("m") == 0}}
<div>
<b> {{: #index+1}}. </b>
<span> {{: #data}} </span>
</div>
{{/si}}
{{/para}}
resultado:
Copie el código de la siguiente manera: no disponible (vista anidada): use #getIndex () 1. Maradona
No disponible (vista anidada): use #getIndex () 1. Messi
¡Simplemente agregué un juicio IF y en realidad informó un error!
El problema radica en #Index. El mensaje de error está muy claro. Puede usar #getIndex () en lugar de #Index.
Pruebe el código reemplazado:
datos:
Copie el código de la siguiente manera: {
Nombres: ["Maradona", "Pelé", "Ronaldo", "Messi"]
}
Marca de plantilla:
Copie el código de la siguiente manera: {{para nombres}}
{{if #data.indexof ("m") == 0}}
<div>
<b> {{: #getIndex ()+1}}. </b>
<span> {{: #data}} </span>
</div>
{{/si}}
{{/para}}
resultado:
Copie el código de la siguiente manera: 1. Maradona
4. Messi
¿Por qué es esto? En pocas palabras, es porque, aunque {{if}} no crea un alcance de datos regular, interfiere con el alcance oculto. Es decir, {{if}} no bloqueará la visibilidad de los datos regulares (los datos que pasa), sino que interferirá con la visibilidad de los datos ocultos (#Index, #parent). Esta es una comprensión simple, y no hay necesidad de entrar en él, porque esto es solo un defecto de este marco, no un estándar.
Por lo tanto, este artículo ofrece a los lectores una conclusión importante: intente usar #getIndex () para obtener el índice y evitar usar #Index a menos que su aplicación sea bastante simple.
Espero que este artículo sea útil para el aprendizaje de JSRender de todos.