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/