如何使用Javascript中的Knockout计算分组行上的小计?

时间:2012-02-22 01:08:24

标签: javascript knockout.js

我正在尝试计算所选行的分组行的子总计,我能够通过循环遍历所有元素来计算但是在每个更改总计算上。任何人都可以建议如何从分组行中添加或减去行值。如果我们有大量的行并且选择所有行都需要更多时间。这是我的示例代码http://jsfiddle.net/Srinivasa/PAtSd/2/

1 个答案:

答案 0 :(得分:0)

你的方法对我很好。如果你遇到性能问题,你必须拥有非常多的行,在这种情况下你真的想重新考虑用户界面。也就是说,您实际上可以通过订阅 qty 选定的可观察量并根据一本书的旧值和新值更改总计来尝试优化计算。下面的代码说明了这个想法,但不是一个完整的解决方案。此外,标准的knockoutjs observable没有 lastValue 属性,所以你必须自己实现它(here是你如何做的一个例子。)

function book(...){
    var self = this;
    ...
    self.qty.subscribe(function(newValue){
        if(self.selected()){
            //grandTotal is regular observable, not a computed one
            var grandTotal = rootViewModel.grandTotal(); 
            grandTotal = grandTotal - self.qty.lastValue() + newValue;
            rootViewModel(grandTotal);
        }            
    }
}

对于学生级别小计,您需要将学生视图模型作为参数传递给book构造函数:

function book(student, name, qty){
    var self = this;
    ...
    self.qty.subscribe(function(newValue){
        if(self.selected()){
            //student.noOfBooks is regular observable, not a computed one
            var noOfBooks = student.noOfBooks(); 
            noOfBooks = noOfBooks - self.qty.lastValue() + newValue;
            student.noOfBooks(noOfBooks);
        }            
    }
}

您可能需要将学生构造函数更改为以下内容:

function student(name, books /*array of plain object, not view models*/){
    var self = this;
    self.name = name;
    self.noOfBooks = ko.observable()
    self.books = ko.utils.arrayMap(books, function(b){
        return new book(self, b.name, b.qty);
    });
}