如何在 Javascript 中使用 Knockout 计算分组行的小计？

发布于 2025-01-08 01:12:25 字数 208 浏览 1 评论 0原文

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

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

萌面超妹 2025-01-15 01:12:26

你的方法对我来说看起来不错。如果您遇到性能问题，那么您必须有大量的行，在这种情况下您确实需要重新考虑 UI。也就是说，您实际上可以尝试通过订阅数量和选定可观察值来优化计算，并根据一本书的新旧值更改总计。下面的代码说明了这个想法，但并不是完整的解决方案。另外，标准的knockoutjs observable没有lastValue属性，所以你必须自己实现它（这里是一个如何做到这一点的示例）。

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);
        }            
    }
}

对于学生级别的小计，您需要将学生视图模型作为参数传递给书籍构造函数：

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);
    });
}

Your approach looks good to me. If you have performance problems with it you must have really big number of rows, in which case you really want to rethink the UI. That said, you could actually try optimizing calculations by subscribing to qty and selected observables and changing your totals based on old and new values for one book. The code below illustrates the idea but is not a complete solution. Also, standard knockoutjs observable doesn't have lastValue attribute, so you would have to implement it by yourself (here is an example of how you would do it).

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);
        }            
    }
}

For student level subtotals you will need to pass student viewmodel as a parameter to book constructor:

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);
        }            
    }
}

You will probably need to change student constructor to something like this:

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);
    });
}

回复收藏 0 原文

~没有更多了~