다차원 knockoutjs 바인딩 observableArray

Question

JSON 데이터가 있습니다. ko.observableArray로 변환했습니다. 나의 의도는 그것을 내 견해에 묶는 것이다. 이 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" } 
    } 

:

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

이 내가 데이터를 바인딩하기 위해 수행하지만, 작동하지 않는 그 무엇을 다음과 같이

json으로는

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

두 가지 :

당신이 바인딩이 observableArray의 값이 실제 배열이라고 가정으로, 실제 배열로 객체를 매핑 할 필요가

1. 즉, 빈 배열을 만들고 객체의 각 속성을 반복하여 배열에 밀어 넣으려고합니다. 그런 다음 색인을 항목의 속성으로 추가 할 수 있습니다. 뭔가 같이 :

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

2 일부 브라우저는 tr 태그 사이에 넣어 의견에 대한 민감한 될 수 있습니다. 여기

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