我可以绑定到计算的observable数组（敲除）吗？

我有一些可观察的数组项（简单的数字对），我想将它绑定到一个表。然后我想绑定一个循环第一个数组的计算的observable，并通过分组汇总一些值。我的foreach循环工作正常，并按群组总结数字（正如你可以通过取消注释我的警报一样），但它永远不会绑定到html。看下面我的小提琴。我哪里错了？我可以绑定到计算的observable数组（敲除）吗？

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