lồng các mẫu jQuery

Question

Tôi đang cố gắng hiển thị dữ liệu JSON trong một bảng bằng cách sử dụng các mẫu jQuery lồng nhau.

Tôi có thể làm cho nó chỉ hoạt động ở cấp độ đầu tiên.

Dưới đây là một ví dụ về những gì tôi đang cố gắng để đạt được:

Một Client có một danh sách các đơn đặt hàng và một Fullname. Điều này được hiển thị bằng cách sử dụng clientTemplate và orderTemplate. Tính đến thời điểm đó, mọi thứ đều hoạt động tốt.

Hiện tại, Order có danh sách Products. Vì vậy, tôi gọi số productTemplate từ trong số orderTemplate. Và các dữ liệu không bị ràng buộc :(

Tôi đoán đây là bởi vì tôi đang đi qua $data đến productTemplate và $data đề cập đến đối tượng cấp cao nhất (các Client). Nhưng làm thế nào để tôi vượt qua thứ tự hiện tại sau đó?

Dưới đây là các mẫu của tôi:

<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

trong bối cảnh của một {{each}}, bạn phải sử dụng $value thay vì $data để tham khảo các mục lặp:

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