Вложенные шаблоны JQuery - PullRequest
       6

Вложенные шаблоны JQuery

6 голосов
/ 14 декабря 2011

Я пытаюсь отобразить данные JSON в таблице, используя вложенные шаблоны jQuery.

Я могу заставить их работать только до первого уровня.

Вот пример того, чего я пытаюсь достичь:

A Client имеет список заказов и Fullname.Это отображается с использованием clientTemplate и orderTemplate.До этого момента все работало нормально.

Теперь у Order есть список Products.Поэтому я звоню productTemplate изнутри orderTemplate.И данные не связаны :(

Я предполагаю, что это потому, что я передаю $data productTemplate и $data относится к объекту верхнего уровня (Client).Но как мне передать текущий ордер тогда?

Вот мои шаблоны:

    <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>

1 Ответ

3 голосов
/ 14 декабря 2011

В контексте {{each}} вы должны использовать $value вместо $data для ссылки на элемент итерации:

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