6

我有一点独特的情况，我希望淘汰赛 js 提供了一种方法来实现这一点。

我有以下结构：

Order = function() {
    var self = this;
    self.Name = 'default';
}

Customer = function() {
     var self = this;
     self.Name = 'default';
     self.Orders = [];
}

我有下表

<table>
    <thead>
        <tr>
            <th>Customer Name</th>
        </tr>
    </thead>
    <tbody data-bind="foreach: CustomerArray">
        <tr>
            <td data-bind="text: Name"></td>
        </tr>
    </tbody>
</table>

所以这很棒，它给了我所有客户名称的列表。

现在对于第二步，我必须以它列出的方式格式化表格。订单名称，然后是底部的客户名称：

Customer Name (TH LABEL)
Order1
Order2
Order3
Smith, Frank

我想出了通过在每个客户迭代中包含一个 tbody 来嵌套我的订单数组的想法，但我不喜欢这种方法，因为从订单到客户的列宽不会对齐，因为它们是不同的表。

有没有人有什么好方法来解决我不寻常的问题？

谢谢！

4

2 回答 2

9

您可以使用“无容器控制流语法”（注释 4 on the foreach docs）为每个订单呈现 TD，然后是客户，没有包含元素：

<table>
    <thead>
        <tr>
            <th>Customer Name</th>
        </tr>
    </thead>
    <tbody data-bind="foreach: CustomerArray">
        <!-- ko foreach: Orders -->
        <tr>
            <td data-bind="text: OrderDetails"></td>
        </tr>
        <!-- /ko -->
        <tr>
            <td data-bind="text: Name"></td>
        </tr>
    </tbody>
</table>

注释块创建一个绑定范围，就像 TBODY 上的一样，但没有包含元素。

于 2013-05-20T17:02:28.140 回答
3

这应该工作：

<table>
    <thead>
        <tr>
            <th>Customer Name</th>
        </tr>
    </thead>
    <tbody data-bind="foreach: CustomerArray">
       <!-- ko foreach: Orders -->
       <tr>
            <td data-bind="text: Name"></td>
        </tr>
       <!-- /ko -->
        <tr>
            <td data-bind="text: Name"></td>
        </tr>

    </tbody>
</table>

我希望它有所帮助。

于 2013-05-20T17:02:33.017 回答