javascript – Knockout.js：在表和foreach中对值进行求和

带有数据绑定的表目前如下所示：

Source        Calls     ChargeableCalls

Car Insurance
08434599111     3            2
08934345122     2            1

Home Insurance
08734599333     3            2
08034345555     2            1

所需的输出应如下图所示,该表应包含按分组分组的Calls和ChargeableCalls的总值,以及表中所有Calls和ChargeableCalls的总值.

Source          Calls         ChargeableCalls

Car Insurance
08434599154       3                  2
08934345555       2                  1
Total Calls       5     Total CC     3

Home Insurance
08434599154       6                  3
08934345555       1                  0
Total Calls       7     Total CC     3

Total Calls All  24     Total CC All 12

以下是表格中的绑定：

这是我的ViewModel：
function GroupedReportingViewModel() {
    var self = this;

    self.results = ko.observableArray();

    self.groupedResults = {};

    self.getGroup = function (group) {
       return self.groupedResults[group];
    };

    self.groupedResultsC = ko.computed(function () {
        self.groupedResults = {};
        ko.utils.arrayForEach(self.results(),function (r) {
           if (!self.groupedResults[r.division]) self.groupedResults[r.division] = [];
                        self.groupedResults[r.division].push(r);
                    });
           return self.groupedResults;
                });

     self.groups = ko.computed(function () {
         var g = [];
         for (x in self.groupedResultsC())
                g.push(x);
                return g;_
       });
    }

     var model = new GroupedReportingViewModel();
     ko.applyBindings(model);
结果observableArray从ajax响应中填充,如下所示：
success: function (jsondata) {
        model.results(jsondata["Data"]["Report"]);
}
jsondata对象如下所示：
{"Data":
    {"Report":[ {"source":"08434599494","division":"Car Insurance","totalCalls":5,"chargeableCalls":23},{"source":"08434599172","totalCalls":512,"chargeableCalls":44},{"source":"08434599129","division":"Home  Insurance","totalCalls":4,"chargeableCalls":2},{"source":"08434599215","division":"Home Insurance","totalCalls":234,"chargeableCalls":54},{"source":"08434599596","totalCalls":332,"chargeableCalls":266}
              ]
    }
}
问：如何实现所需的输出？
最佳答案
在您的示例中,groupedResults是一个数组列表.而不是这样,尝试为一个组创建一个ViewModel.然后可以使用此ViewModel来计算总计.例如…


function GroupViewModel(division) {
    var self = this;
    self.Division = division;
    self.Items = ko.observableArray();
    self.Count = ko.computed(function() { 
        var count = 0;
        ko.utils.arrayForEach(self.Items(),function(r) { count += r.totalCalls; });
        return count; 
    });
    self.ChargeableCount = ko.computed(function() { 
        var count = 0;
        ko.utils.arrayForEach(self.Items(),function(r) { count += r.chargeableCalls; });
        return count; 
    });
}

您也可以简化主Viewmodel,并将项目推送到GroupViewModel中：

function GroupedReportingViewModel() {
    var self = this;
    self.results = ko.observableArray();
    self.groupedResults = ko.computed(function() {
        var groups = [];
        ko.utils.arrayForEach(self.Results(),function(r) {
            var g = ko.utils.arrayFirst(groups,function(g) { return g.Division === r.division; });
            if (!g) {
                g = new GroupViewModel(r.division);
                groups.push(g);
            }
            g.Items.push(r);
        });
        return groups;
    });
    self.TotalCount = ko.computed(function() { 
        var count = 0;
        ko.utils.arrayForEach(self.results(),function(r) { count += r.totalCalls; });
        return count; 
    });
    self.TotalChargeableCount = ko.computed(function() { 
        var count = 0;
        ko.utils.arrayForEach(self.results(),function(r) { count += r.chargeableCalls; });
        return count; 
    });
}

最后在您的视图中,遍历组,然后遍历项：


（编辑：李大同）
【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!