使用过滤器嵌套 foreach 的淘汰赛

Question

我正在尝试在另一个 foreach 中添加一个 foreach 过滤器，假设我有一个带有 Employees 的第一个 foreach，我需要根据员工编号添加另一个 foreach，因此对于每个员工，我需要过滤相关的订单每一个。如何在我的视图中按员工编号过滤我的第二个 foreach 并循环遍历所有员工订单？

这是我的观点：

<div>   
<table id="employee-table">
    <thead>
        <tr>
            <th style="width: 15px" class="sorting_disabled"></th>
            <th class="sorting_disabled">"EmployeeName"</th>
            <th class="sorting_disabled">EmployeeNumber</th>
            <th class="sorting_disabled">Address</th>
            <th class="sorting_disabled">EmployeePosition</th>
            <th class="sorting_disabled">OfficeName</th>
            <th class="sorting_disabled">TotalCharges</th>
        </tr>
    </thead>
    <tbody>
        <!-- ko foreach: model.employeeList() -->
        <tr>                                
            <td data-bind="css: { 'dashboard-collapsed-triangle': $data.numberOfOrders > 0 },
                         click: function () { $('#employee-service-cost-table' + $data.employeeId).toggle(); $(this).toggleClass('dashboard-collapsed-triangle dashboard-expanded-triangle') }" >&nbsp;
            </td>                                
            <td><a href="#tips"><span class="dashboard-employee-selectable" data-bind="text: $data.employeeName"></span></a></td>
            <td><span data-bind="text: $data.employeeNumber"></span></td>
            <td><span data-bind="text: $data.address"></span></td>
            <td><span data-bind="text: $data.employeePosition"></span></td>
            <td><span data-bind="text: $data.officeName"></span></td>
            <td><span data-bind="text: $data.totalCharges"></span></td>
        </tr>

        <!-- HERE I NEED A SECOND FOREACH -->
            <tr style="display: none; background-color: aliceblue" data-bind="attr: { 'id': 'employee-service-cost-table' + $data.employeeId }">
                <td></td>                                
                <td colspan="3"><span data-bind="text: $data.OrderNumber"></span></td>
                <td><span data-bind="text: $data.Description"></span></td>
                <td><span data-bind="text: $data.TotalCharges"></span></td>
                <td><span data-bind="text: $data.Date"></span></td>                                            
            </tr>
        <!-- END SECOND FOREACH -->

        <!-- /ko -->
    </tbody>
</table>

Answer 1

所以如果我没理解错的话，你有一个员工列表和一个订单列表。那么一个员工可以根据员工id有多个订单？

一种方法是按员工 ID 对订单进行分组：

model.ordersByEmployeeId = ko.computed(function() {
    var ordersByEmployeeId = {};
    ko.utils.arrayForEach(model.orders(), function(order) {
        var employeeId = ko.unwrap(order.employeeId);
        if (!ordersByEmployeeId[employeeId]) {
            ordersByEmployeeId[employeeId] = [];
        }
        ordersByEmployeeId[employeeId].push(order);
    });
    return ordersByEmployeeId;
});

那么您的循环将如下所示：

<!-- ko foreach: model.employeeList() -->
...
    <!-- ko foreach: $root.ordersByEmployeeId()[$data.employeeId] -->
    ...

Answer 2

你可以将$data参数传递给二级foreach。

如果您将订单保存在单独的数组中，只需使用：

<!-- ko foreach: getOrders($data.employeeId) -->

其中 getOrders 是一个函数，它将过滤出特定员工的订单。

使用过滤器嵌套 foreach 的淘汰赛

Knockout nested foreach with filters

knockout-2.0

knockout.js