plantillas jQuery anidadas
nested jquery-templates (1)
En el contexto de un {{each}}
, debe usar $value
lugar de $data
para referirse al ítem de iteración:
{{tmpl($value) "#productTemplate"}}
Estoy tratando de mostrar datos JSON en una tabla usando plantillas jQuery anidadas.
Puedo hacer que funcione hasta el primer nivel solamente.
Aquí hay un ejemplo de lo que estoy tratando de lograr:
Un Client
tiene una lista de pedidos y un nombre Fullname
. Esto se muestra utilizando clientTemplate
y orderTemplate
. Hasta ese punto, todo funciona bien.
Ahora, una Order
tiene una lista de Products
. Así que estoy llamando a una productTemplate
de productTemplate
dentro de la orderTemplate
. Y los datos no están vinculados :(
Supongo que es porque estoy pasando $data
a la productTemplate
y $data
refiere al objeto de nivel superior (el Client
). ¿Pero cómo paso la Orden actual entonces?
Aquí están mis plantillas:
<script id="clientTemplate" type="text/x-jquery-tmpl">
<tr><td>Fullname</td></tr>
<tr><td>${Fullname}</td></tr>
<tr>
<td>
<table>
<tr><td>Order Id</td><td>Order Date</td></tr>
{{tmpl($data) "#orderTemplate"}}
</table>
</td>
</tr>
</script>
<script id="orderTemplate" type="text/x-jquery-tmpl">
{{each Orders}}
<tr>
<td>${Id}</td>
<td>${DateOrder}</td>
</tr>
<tr>
<td>
<table>
<tr><td>Product Id</td><td>Quantity</td></tr>
{{tmpl($data) "#productTemplate"}}
</table
</td>
</tr>
{{/each}}
</script>
<script id="productTemplate" type="text/x-jquery-tmpl">
{{each ProductList}}
<tr>
<td>${Id}</td>
<td>${Quantity}</td>
</tr>
{{/each}}
</script>