zagnieżdżanie szablonów jQuery

Question

Próbuję wyświetlić dane JSON w tabeli przy użyciu zagnieżdżonych szablonów jQuery.

Mogę go uruchomić tylko do pierwszego poziomu.

Oto przykład co usiłuję osiągnąć:

Client ma listy zleceń i Fullname. To jest wyświetlane przy użyciu clientTemplate i orderTemplate. Do tego momentu wszystko działa dobrze.

Teraz Order ma listę Products. Dzwonię więc pod numer z poziomu orderTemplate. A dane nie jest związana :(

Zgaduję, to dlatego, że jestem przechodzącej $data do productTemplate i $data odnosi się do górnego poziomu obiektu (The Client). Ale jak mam przekazać obecnego porządku wtedy?

Oto moje szablony:

<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

w kontekście {{each}}, trzeba użyć $value zamiast $data odnosić się do elementu iteracji:

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