nesting jQuery templates

Question

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

I can get it to work up to the first level only.

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

A Client has a list of Orders and a Fullname. This is displayed using the clientTemplate and the orderTemplate. Up to that point, everything works fine.

Now, an Order has a list of Products. So I'm calling a productTemplate from within the orderTemplate. And the data is not bound :(

I'm guessing this is because I'm passing $data to the productTemplate and $data refers to the top level object (the Client). But how do I pass the current Order then?

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

Within the context of an {{each}}, you have to use $value instead of $data to refer to the iteration item:

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