计算计算的可观测量的总和为总数

时间:2015-02-24 14:14:24

标签: knockout.js

我的视图有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);
           });
    });

2 个答案:

答案 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>