Связывание многомерных нокаутов наблюдаемогоArray

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

Это Javascript, который преобразует JSON в observableArray:

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/