계산 된 관찰 가능 어레이 (녹아웃)에 바인딩 할 수 있습니까?

일부 항목 (간단한 숫자 쌍)의 관찰 가능한 배열이 있고 이것을 하나의 테이블에 바인딩하려고합니다. 그런 다음 첫 번째 배열을 반복하고 그룹화하여 일부 값을 요약 한 계산 된 관찰 가능을 바인딩하려고합니다. 내 foreach 루프가 잘 작동하고 그룹별로 숫자를 합산합니다 (경고를 주석 처리하여 볼 수 있듯이). 그러나 html에 바인딩되지 않습니다. 아래 나의 피들을보십시오. 내가 어디로 잘못 가고 있니?계산 된 관찰 가능 어레이 (녹아웃)에 바인딩 할 수 있습니까?

function DataPoint(group, num) { 
this.group = group; 
this.num = num; 
} 
function TestViewModel() { 
var self = this; 

self.data = ko.observableArray([ 
    new DataPoint(1, 1), 
    new DataPoint(2, 5), 
    new DataPoint(3, 9), 
    new DataPoint(3, 10), 
    new DataPoint(4, 3), 
    new DataPoint(4, 6), 
    new DataPoint(5, 3), 
    new DataPoint(5, 9), 
    new DataPoint(6, 7), 
    new DataPoint(7, 2), 
    new DataPoint(8, 8), 
    new DataPoint(8, 4), 
    new DataPoint(9, 3), 
    new DataPoint(11, 6) 
]) 

self.groupedData = ko.computed(function() { 
    var total = 0; 
    var group = -1; 
    var myArray = self.data(); 
    var counter = 0; 
    var rows = self.data().length; 
    var result = ko.observableArray([]); 
    ko.utils.arrayForEach(myArray, function (item) { 
     if (group == -1) { 
      group = item.group; 
     } 
     if (group == item.group) { 
      total += parseInt(item.num) 
     } else { 
      var d = new DataPoint(group, total); 
      result.pop(d); 
      total = 0; 
      group = item.group; 
      total += parseInt(item.num) 
      //alert(d.group + ':' + d.num); 
     } 
     if (counter == rows - 1) { 
      var d = new DataPoint(group, total); 
      result.pop(d); 
      //alert(d.group + ':' + d.num); 
     } 
     counter += 1; 
    }); 
    return result(); 
    },self); 
} 

ko.applyBindings(new TestViewModel());

그리고 어떤 조언을 사전에 HTML

<body> 
Ungrouped Data 

<table> 
    <thead> 
     <tr> 
      <td>Group</td> 
      <td>Sum</td> 
     </tr> 
    </thead> 
    <tbody data-bind="foreach: data"> 
     <tr> 
      <td> 
       <span data-bind="text: group"></span> 
      </td> 
      <td> 
       <span data-bind="text: num"></span> 
      </td> 
     </tr> 
    </tbody> 
</table> 
<br /> 
Grouped Data 
<table> 
    <thead> 
     <tr> 
      <td>Group</td> 
      <td>Sum</td> 
     </tr> 
    </thead> 
    <tbody data-bind="foreach: groupedData"> 
     <tr> 
      <td> 
       <span data-bind="text: group"></span> 
      </td> 
      <td> 
       <span data-bind="text: num"></span> 
      </td> 
     </tr> 
    </tbody> 
</table> 
<script src="Scripts/lib/knockout-3.0.0.js"></script> 
<script src="Scripts/app/TestViewModel.js"></script> 
</body>

http://jsfiddle.net/gaku6mku/1/

감사합니다!

출처

2014-09-04 David Frodin