将计算出的可观测量之和计算为总和

Question

我的视图有3个属性A、B、C，D是A-（B-C）的计算值。这用网格行表示。我需要将计算列汇总为汇总汇总，因为我没有用于保存计算列的模型属性，如何或什么是计算汇总的正确方法。例如：

A     | B      | C    |D   
10      3        2     5 
20      2        1     17

对于上述情况，D为计算列，10-（3+2）=5

我的模型有一个单行模型，它不能容纳所有列，这个模型是由第三方创建的，我现在不能更改它。任何想法或提示都将不胜感激。

视图模型：

   var selectedRowModel = function(data){
           var A = data.val1;
           var B = data.val2;
           var C = data.val3;
           // D is present per row but once the grid is displayed,I need to evaluate sum of D
           var D = ko.computed(function(){    
               return A -(B+C);
           });
    });

Answer 1

这里有一个jsfiddle，它类似于我认为您正在尝试做的事情。我制作了一个视图模型，它保存了行数据的observableArray集合，并包含一个对它们求和的函数。为了方便起见，它也可以是计算的（首选），也可以由事件触发并更新。

HTML:

<table>
    <thead>
        <tr>
            <td>A</td>
            <td>B</td>
            <td>C</td>
            <td>D</td>
        </tr>
    </thead>
    <tbody data-bind="foreach: collection">
        <tr>
            <td><span data-bind="text:A"></span></td>
            <td><span data-bind="text:B"></span></td>
            <td><span data-bind="text:C"></span></td>
            <td><span data-bind="text:D"></span></td>
        </tr>
    </tbody>
</table>
Sum of the D column is: <span data-bind="text: sumD()"></span>

Javascript：

var Model = function(a,b,c) {
    var self = this;
    self.A = ko.observable(a);
    self.B = ko.observable(b);
    self.C = ko.observable(c);
    self.D = ko.computed(function() {
        return this.A() - (this.B() + this.C());
    }, self);
}
var ModelCollection = function() {
    var self = this;
    self.collection = ko.observableArray([
        new Model(10,3,2),
        new Model(20,2,1)
    ]);
    self.sumD = function() {
        var sum = 0;
        self.collection().forEach(function(item) {
            sum += item.D();
        });
        return sum;
    };
}
ko.applyBindings(new ModelCollection())

Answer 2

你的意思是这样的吗？

//A | B | C |D
//10 3 2 5 
//20 2 1 17
//For the above, D is the computed column, 10 - (3+2)=5
var model = function(){
  var A = ko.observable(10);
  var B = ko.observable(10);
  var C = ko.observable(10);
  var D = ko.computed(function(){
      return parseInt(A()) - (parseInt(B()) + parseInt(C()));
  });
  
  return {
    A:A,
    B:B,
    C:C,
    D:D
  };
  
}
ko.applyBindings(model);

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>
<input type="text" data-bind="value: A" /> -
(<input type="text" data-bind="value: B" /> +
<input type="text" data-bind="value: C" />)
<H2 data-bind="text: D"></H2>