我的视图有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);
});
});
答案 0 :(得分: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())
答案 1 :(得分:0)
你的意思是这样吗?
//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>