計算累計觀測值的總和

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>