1

我有一些项目的可观察数组（简单的数字对），我想将它绑定到一个表。然后我想绑定一个计算的 observable，它循环第一个数组并通过分组总结一些值。我的 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/

提前感谢您的任何建议！

4

1 回答 1

1

result.pop(d)应该是result.push(d)。

在荷马辛普森的不朽话语中...... doh！

于 2014-09-04T23:00:56.353 回答