JsRender: cómo pasar variables a una plantilla anidada
Frecuentes
Visto 5,750 equipos
5
Quiero usar una plantilla anidada en diferentes partes de mi página web. Para las diferentes partes, necesito obtener un valor de una matriz dentro de la plantilla anidada. No puedo usar un ciclo for porque cada parte tiene una clase y posición diferente en el sitio web. ¿Es posible pasar una variable a la plantilla anidada? El siguiente código simplifica lo que estoy tratando de lograr:
<script id="myBtnTmpl" type="text/x-jsrender">
<button class="btn">
{{:myData.myArray[INDEX_VARIABLE].btnName}}
</button>
</script>
// Here I want to use INDEX_VARIABLE = 0
<div class="BigButton">
{{if myData tmpl="myBtnTmpl"/}}
</div>
// Here I want to use INDEX_VARIABLE = 1
<div class="MediumButton">
{{if myData tmpl="myBtnTmpl"/}}
</div>
// Here I want to use INDEX_VARIABLE = 2
<div class="SmallButton">
{{if myData tmpl="myBtnTmpl"/}}
</div>
Otra pregunta: cuando se usan plantillas anidadas, ¿es posible incluir plantillas anidadas como esta {{tmpl="myBtnTmpl"/}} sin la sintaxis if?
¡Gracias!
1 Respuestas
7
Sí, puede establecer parámetros de plantilla con nombre en la etiqueta que está utilizando tmpl="myBtnTmpl"
(ya sea que sea un {{if}}
etiqueta o una {{for}}
etiqueta):
<div class="BigButton">
{{for myData ~arrIndex=0 tmpl="myBtnTmpl"/}}
</div>
Luego, puede acceder al parámetro de la plantilla de la misma manera que accedería a un ayudante registrado, agregando '~' al nombre.
<button class="btn">
{{:myData.myArray[~arrIndex].btnName}}
</button>
Por cierto, también puede pasar variables y funciones auxiliares (además de los datos) con el método render. Acabo de agregar un nuevo muestra de demostración mostrando que.
Entonces, lo que esto significa es que las plantillas se pueden 'parametrizar' de manera similar, ya sea que las esté representando desde el código o declarativamente como en las plantillas anidadas anteriores.
Respondido 16 Jul 13, 16:07
Hola Boris y gracias por tu rápida respuesta. Seguí tu ejemplo y puse ~arrIndex=0 en la etiqueta. Sin embargo, la plantilla no parece encontrar la variable cuando intento acceder a ella dentro de la plantilla. Estoy usando el último número de compromisos 19. ¿Funcionó para usted? - guardia
Gracias por seguir apoyando a jsRender, deberías poner un showCase en la página oficial: boban stojanovski
@boban984: ¿Te refieres a mostrar enlaces a sitios que usan JsRender o JsViews? - borismoore
@BorisMoore Sí, siento que jsRender está subestimado. Lo he estado usando desde que estaba en la etapa alfa, antes de que hubiera jsViews :) En ese momento no había Angular o Ember, Backbone y Knockout se estaban volviendo populares, pero jsRender fue mucho más eficaz para nuestras necesidades, por eso lo elegimos. Todavía lo estoy usando ... comprobar Solaborado - boban stojanovski
@BobanStojanovski: Gracias, es bueno escucharlo. Por supuesto, sé que hay muchas personas que hacen cosas geniales y crean sitios geniales con JsRender o JsViews, pero es difícil averiguar quiénes son o establecer una lista de dichos sitios. Además, muchos de ellos son poderosos sitios internos, no de cara al público. Es por eso que hasta ahora no he intentado establecer una 'galería'... (Si tiene más ideas al respecto, me complacería intercambiar por correo electrónico: borismoore@gmail.com) - borismoore
No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas javascript jquery jsrender or haz tu propia pregunta.
Para la segunda pregunta, {{for myData tmpl="#myBtnTmpl"/}} Pero no entiendo totalmente tu pregunta original... - Willy
De todos modos, según el título, creo que puedes tener una referencia en github.com/BorisMoore/jsrender/blob/master/demos/step-by-step/… - Willy