Binding multidimensional knockoutjs ObservableArray

Question

Ich habe eine JSON-Daten. Ich konvertierte es in ko.observableArray. Meine Absicht ist es an meine Sicht zu binden.

Die JSON ist wie folgt:

{ "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" } 
    } 

Dies ist Javascript, die die JSON observableArray konvertiert:

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

Dies ist, was ich die Daten zu binden getan, aber seine Arbeit nicht:

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

Jede Hilfe, um diese Art von Daten in Knockout zu binden.

Answer 1

Zwei Dinge, die Sie wollen tun:

1- Sie müssen Ihr Objekt zu einem tatsächlichen Array abzubilden, wie die Bindungen davon aus, dass der Wert des observableArray eine tatsächliche Array ist. Das bedeutet, dass Sie wahrscheinlich ein leeres Array erstellen, die einzelnen Eigenschaften im Objekt durchlaufen und an das Array senden möchten. Dann können Sie den Index als eine Eigenschaft des Elements hinzufügen. Etwas wie:

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

2- einige Browser können über Kommentare empfindlich sein, die zwischen tr Tags gesetzt werden. Um sicher zu sein, würden Sie Ihre foreach Bindung auf einem tbody Tag legen wie:

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

Beispiel hier: http://jsfiddle.net/rniemeyer/utdAm/