Binding multidimensional knockoutjs observableArray

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/