淘汰赛 foreach 数值数组

Question

我有这个数组：

[{"room_id":"1","room_name":"CDI","workers":[[{"worker_id":"12","worker_name":"FF","worker_grade":"Q2"},{"worker_id":"13","worker_name":"Test","worker_grade":"Q1"}],[{"worker_id":"12","worker_name":"FF","worker_grade":"Q2"},{"worker_id":"13","worker_name":"Test","worker_grade":"Q1"}],[],[],[{"worker_id":"13","worker_name":"Test","worker_grade":"Q1"}]]},{"room_id":"2","room_name":"DD","workers":[[],[],[],[{"worker_id":"12","worker_name":"FF","worker_grade":"Q2"},{"worker_id":"13","worker_name":"Test","worker_grade":"Q1"}],[]]}]

我的问题是 y viewmodel 中的循环：

 <tbody data-bind="foreach: rooms">
            <tr>
                <th data-bind="text: room_name"></th>
                <!--ko foreach: workers-->
                <td>
                <!--ko foreach: 0-->
                <!--ko text: worker_name--><!--/ko-->
                    <!--/ko-->
                </td>
                <td>
                    <!--ko foreach: 1-->
                    <!--ko text: worker_name--><!--/ko-->
                    <!--/ko-->
                </td>
                <td>
                    <!--ko foreach: 2-->
                    <!--ko text: worker_name--><!--/ko-->
                    <!--/ko-->
                </td>
                <td>
                    <!--ko foreach: 3-->
                    <!--ko text: worker_name--><!--/ko-->
                    <!--/ko-->
                </td>
                <td>
                    <!--ko foreach: 4-->
                    <!--ko text: worker_name--><!--/ko-->
                    <!--/ko-->
                </td>
                <!--/ko-->
            </tr>
        </tbody>

因为 worker 之后的数组不是关联的，所以我无法循环遍历它。但是我现在如何才能通过它并显示其他数组，例如：

[{"worker_id":"12","worker_name":"Adriaan Wind","worker_grade":"Q2"},{"worker_id":"13","worker_name":"Test","worker_grade":"Q1"}]

上面的解决方案不起作用。

Answer 1

我认为您需要为房间绑定添加“房间”之类的名称，为与工作人员相关的绑定添加“工人”。然后您可以通过以下方式绑定您的详细信息

 ko.applyBindings(
     { "rooms" : [{ "room_id":"1","room_name":"CDI",
       "workers":[{"worker_id":"12",                                                                          "worker_name":"FF",
                    "worker_grade":"Q2"},
                  {"worker_id":"13", 
                   "worker_name":"Test",
                   "worker_grade":"Q1"}
                 ]}
                 ]});

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.0.0/knockout-min.js"></script>
<div data-bind="foreach: rooms">
    Room <span data-bind="text:room_name "></span>
    <div data-bind="foreach: workers">
        Worker: <span data-bind="text: worker_name"></span><hr/>
    </div>
</div>