绑定多维knockoutjs observableArray答案

【问题标题】：Binding multidimensional knockoutjs observableArray绑定多维knockoutjs observableArray
【发布时间】：2012-04-05 20:59:28
【问题描述】：

我有一个 JSON 数据。我将其转换为 ko.observableArray。我的意图是将它绑定到我的视图。

JSON如下：

    { "1" : { "asr" : "15:50", "fajr" : "03:00", "isha" : "21:31", "maghrib" : "19:02", "zuhr" : "12:21" },
      "2" : { "asr" : "15:51", "fajr" : "02:55", "isha" : "21:35", "maghrib" : "19:04", "zuhr" : "12:21" },
      "3" : { "asr" : "15:53", "fajr" : "02:51", "isha" : "21:39", "maghrib" : "19:07", "zuhr" : "12:21" },
      "4" : { "asr" : "15:54", "fajr" : "02:46", "isha" : "21:42", "maghrib" : "19:09", "zuhr" : "12:20" }
    }

这是将 JSON 转换为 observableArray 的 javascript：

    self.prayerData(jQuery.parseJSON(data));
    $.each(self.prayerData(), function (days) {
            // It works and displays the data
            console.log(days + "  -  " + this.fajr + " | " + this.asr);
        });

这是我为绑定数据所做的，但它不起作用：

<!-- ko foreach:prayerData()-->
    <tr>
        <td data-bind="text: index"></td>  <!-- Display the current row -->
        <td data-bind="text: fajr"></td>
        <td data-bind="text: zuhr"></td>
        <td data-bind="text: asr"></td>
        <td data-bind="text: maghrib"></td>
        <td data-bind="text: isha"></td>
    </tr>
<!-- /ko -->

在淘汰赛中绑定此类数据的任何帮助。

【问题讨论】：

标签： javascript data-binding multidimensional-array knockout.js

【解决方案1】：

你想做的两件事：

1- 您需要将对象映射到实际数组，因为绑定假定 observableArray 的值是实际数组。这意味着您可能想要创建一个空数组，循环遍历对象中的每个属性并将其推送到数组中。然后，您可以将索引添加为项目的属性。比如：

var mappedToArray = [];
$.each(data, function(index, item) {
    mappedToArray.push(item);
    item.index = index;
});

2- 一些浏览器可能对放在tr 标记之间的 cmets 很敏感。为了安全起见，您可能希望将 foreach 绑定放在 tbody 标记上，例如：

<table>
    <tr>
        <th>index</th>
        <th>fajr</th>
        <th>zuhr</th>
        <th>asr</th>
        <th>maghrib</th>
        <th>isha</th>
    </tr>
    <tbody data-bind="foreach: prayerData">
        <tr>
            <td data-bind="text: index"></td>  <!-- Display the current row -->
            <td data-bind="text: fajr"></td>
            <td data-bind="text: zuhr"></td>
            <td data-bind="text: asr"></td>
            <td data-bind="text: maghrib"></td>
            <td data-bind="text: isha"></td>
        </tr>
    </tbody>
</table>

示例：http://jsfiddle.net/rniemeyer/utdAm/

【讨论】：