使用嵌套表淘汰foreach

Question

我有一个独特的情况,我希望淘汰赛提供一种方法来实现这一目标.

我有以下结构:

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来嵌套我的订单数组的想法,但我不喜欢这种方法,因为从订单到客户的列宽不会对齐,因为它们是不同的表.

有没有人有任何好办法解决我的异常问题？

谢谢!

Answer 1

您可以使用"无容器控制流语法"(关于foreach文档的注释4)为每个订单呈现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上的绑定范围一样,但没有包含元素.