使用 Knockout foreach 绑定嵌套数组答案

【问题标题】：Binding nested array using Knockout foreach使用 Knockout foreach 绑定嵌套数组
【发布时间】：2012-09-24 05:38:04
【问题描述】：

在使用淘汰赛 foreach 绑定嵌套数组方面需要帮助。

以下是代码，想知道如何获取 PatAppointments 数组中的元素。

 <script language="javascript" type="text/javascript">
 ko.applyBindings({
    "appointment": [{
        "Date": "01\/10\/2012",
        "PatAppointments": [{
            "EndTime": "11:15:00",
            "EventId": null,
            "Facility": "General Physician",
            "PatientID": 23,
            "PatientName": "Vicki"
        }],
        "PatAppointments": [{
            "EndTime": "11:15:00",
            "EventId": null,
            "Facility": "General Physician",
            "PatientID": 23,
            "PatientName": "Scott"
        }]
    }]
});

</script>

<table>
<tbody data-bind="foreach: appointment">
<tr>
    <td data-bind="text: Date">
    </td>
</tr>
<tr>
    <td>
         @*
        <tbody data-bind="foreach: appointment.PatAppointments">
        <tr>
            <td data-bind="text: PatAppointments.PatientName">
            </td>
            <td data-bind="text: PatAppointments.Facility">
            </td>
        </tr>
        </tbody>
        *@
    </td>
</tr>
</tbody>
</table>

【问题讨论】：

标签： knockout.js

【解决方案1】：

正如您当前设置的那样，没有 foreach 可以工作。要正确设置您的 PatAppointments，您的对象应如下所示

"appointment": [{
    "Date": "01\/10\/2012",
    "PatAppointments": [
    {
        "EndTime": "11:15:00",
        "EventId": null,
        "Facility": "General Physician",
        "PatientID": 23,
        "PatientName": "Vicki"
    },
    {
        "EndTime": "11:15:00",
        "EventId": null,
        "Facility": "General Physician",
        "PatientID": 23,
        "PatientName": "Scott"
    }]
}]

然后正如 gbs 所说，您需要在另一个 foreach 绑定中使用 foreach 绑定：

<div data-bind="foreach: appointment">
    <div data-bind="foreach: PatAppointments">
        //Everything you want displayed from each PatAppointment here.
    </div>
</div>

小例子见fiddle。

【讨论】：

【解决方案2】：

我正在使用嵌套数组，其中很难/无用地创建元素来绑定 foreach 语法。我喜欢这样的“无容器控制流语法”：

<!-- ko foreach: appointment -->
    <!-- ko foreach: PatAppointments -->
        <span data-bind="text: PatientName"></span>
    <!-- /ko -->
<!-- /ko -->

查看它的文档，在“注 4”下 http://knockoutjs.com/documentation/foreach-binding.html

【讨论】：

【解决方案3】：

由于您有一个数组嵌套在另一个数组中，因此您需要在 2 个嵌套的 html 元素（div、ul、tr、...）中定义 2 个 foreach 绑定，如下例所示：

<div data-bind="foreach: appointment">
    <div data-bind="foreach: PatAppointments">
        <span data-bind="text: PatientName"></span>
    </div>
</div>

【讨论】：