title: nesting jQuery templates
body: <p>I'm trying to display JSON data in a table using nested jQuery templates.</p>
  
  <p>I can get it to work up to the first level only. </p>
  
  <p>Here's an example of what I'm trying to achieve:</p>
  
  <p>A <code>Client</code> has a list of Orders and a <code>Fullname</code>. This is displayed using the <code>clientTemplate</code> and the <code>orderTemplate</code>. Up to that point, everything works fine.</p>
  
  <p>Now, an <code>Order</code> has a list of <code>Products</code>. So I'm calling a <code>productTemplate</code> from within the <code>orderTemplate</code>. And the data is not bound :( </p>
  
  <p>I'm guessing this is because I'm passing <code>$data</code> to the <code>productTemplate</code> and <code>$data</code> refers to the top level object (the <code>Client</code>). But how do I pass the current Order then?</p>
  
  <p>Here are my templates:</p>
  
  <pre><code>    &lt;script id="clientTemplate" type="text/x-jquery-tmpl"&gt;
      &lt;tr&gt;&lt;td&gt;Fullname&lt;/td&gt;&lt;/tr&gt;
      &lt;tr&gt;&lt;td&gt;${Fullname}&lt;/td&gt;&lt;/tr&gt;        
      &lt;tr&gt;
         &lt;td&gt;
            &lt;table&gt;
              &lt;tr&gt;&lt;td&gt;Order Id&lt;/td&gt;&lt;td&gt;Order Date&lt;/td&gt;&lt;/tr&gt;
              {{tmpl($data) "#orderTemplate"}}            
            &lt;/table&gt;
         &lt;/td&gt;
      &lt;/tr&gt;
      &lt;/script&gt;
  
      &lt;script id="orderTemplate" type="text/x-jquery-tmpl"&gt;
      {{each Orders}}
        &lt;tr&gt;
            &lt;td&gt;${Id}&lt;/td&gt;
            &lt;td&gt;${DateOrder}&lt;/td&gt;                            
        &lt;/tr&gt;
        &lt;tr&gt;
          &lt;td&gt;
            &lt;table&gt;
              &lt;tr&gt;&lt;td&gt;Product Id&lt;/td&gt;&lt;td&gt;Quantity&lt;/td&gt;&lt;/tr&gt;
              {{tmpl($data) "#productTemplate"}}
            &lt;/table
          &lt;/td&gt;
        &lt;/tr&gt;
      {{/each}}
      &lt;/script&gt;
  
      &lt;script id="productTemplate" type="text/x-jquery-tmpl"&gt;
     {{each ProductList}}
        &lt;tr&gt;
            &lt;td&gt;${Id}&lt;/td&gt;
            &lt;td&gt;${Quantity}&lt;/td&gt;
        &lt;/tr&gt;
      {{/each}}
      &lt;/script&gt;
  </code></pre>