Question

我有一个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 -->

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

Answer 1

您要做的两件事：

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

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

2-某些浏览器可能会对tr标记之间的评论感到焦虑。为安全起见，您需要将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/

绑定多维knockoutjs observableArray

1 个答案: