plantillas jQuery anidadas

nested jquery-templates

Question

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>

Answer 1

En el contexto de un {{each}} , debe usar $value lugar de $data para referirse al ítem de iteración:

{{tmpl($value) "#productTemplate"}}