嵌套jQuery模板

时间:2011-12-14 19:37:02

标签: jquery nested jquery-templates

我正在尝试使用嵌套的jQuery模板在表中显示JSON数据。

我可以让它只能达到第一级。

以下是我想要实现的一个例子:

Client有一个订单列表和一个Fullname。这是使用clientTemplateorderTemplate显示的。到目前为止,一切正常。

现在,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 个答案:

答案 0 :(得分:3)

{{each}}的上下文中,您必须使用$value而不是$data来引用迭代项:

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