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

您可以使用“无容器控制流语法”（Note 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上的绑定范围一样，但没有包含元素。

Answer 2

这应该有效：

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

我希望它有所帮助。

使用嵌套表淘汰foreach

2 个答案: