绑定多维敲除js observableArray

Binding multidimensional knockoutjs observableArray

本文关键字：js observableArray 绑定      更新时间：2023-09-26

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

在挖空中绑定此类数据的任何帮助。

您需要

做的两件事：

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

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/

相关文章：