3

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 -->

ノックアウトでこの種のデータをバインドするのに役立ちます。

4

1 に答える 1

3

あなたがしたい2つのこと：

1-バインディングはobservableArrayの値が実際の配列であると想定しているため、オブジェクトを実際の配列にマップする必要があります。これは、空の配列を作成し、オブジェクトの各プロパティをループして、それを配列にプッシュしたいということを意味します。次に、インデックスをアイテムのプロパティとして追加できます。何かのようなもの：

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

tr2- 一部のブラウザーは、タグの間に挿入されたコメントに神経質になる場合があります。安全のために、次のようなタグに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/

于 2012-04-05T21:29:21.973 に答える