JQuery Nested Templates

Question

I am trying to display JSON data in a table using nested jQuery templates.

I can make it work only on the first level.

Here is an example of what I'm trying to achieve:

A Client has a list of orders and Fullname . This is displayed using clientTemplate and orderTemplate . Up to this point, everything is working fine.

Order now has a Products list. Therefore, I call productTemplate from orderTemplate . And the data is not related :(

I assume this is because I pass $data to productTemplate , and $data refers to a top-level object ( Client ). But how to transfer the current order?

Here are my templates:

  <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

In the context of {{each}} you need to use $value instead of $data to refer to the iteration element:

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