Knockout.js：当可观察数组中的值发生变化时触发计算的最佳方法是啥

Posted 2023-03-27

【中文标题】Knockout.js：当可观察数组中的值发生变化时触发计算的最佳方法是啥

【英文标题】：Knockout.js : What is the best way to trigger a calculation when a value in observable arrray changesKnockout.js：当可观察数组中的值发生变化时触发计算的最佳方法是什么

【发布时间】：2021-03-07 00:58:22

【问题描述】：

我们有一个 observableArry 对象，其中包含可观察的属性（描述、数量、类型）。

这些都保存在一个全局列表中 - 称它们为补充项目。

这些项目可以添加到预算中的行中。每行可以包含 0 个或多个补充项目 - 但每个项目只能包含一个 - 不能重复。

预算行项目有一个单位成本值和一个补充总计列。后者计算如下

this.suppitems().reduce((total, current) =>  current.isBillable() ? current.quantity() * this.unitcost() : 0, 0)

换句话说，如果补充项目类型是可计费的，则将其数量乘以预算行项目的单位成本，然后添加到该行的总补充项目成本。

还有一列跟踪分配给该行的补充项目总数（它们的数量之和）。计算如下

this.suppitems().reduce((total, current) => total + +current.quantity(), 0)

这一切都很好 - 当您从一行的 Supp Item List 中添加/删除 Supp Items 时，Supp Items 的总项目数和总成本都会更新。

但是，当已分配给行的 Supp Item 的数量仅更新 Supp Item Total（项目数）时 - 第一次计算（计算总成本）不会触发。

一种选择是向 Supp Item List 对象（管理 SuppItems 的 observableArray 的父对象）添加一个 observable，将其称为“hasChanged”。在 Supp Item 对象中订阅数量值，当它发生变化时通知父列表，父列表依次更新其 hasChanged 值。

行项目订阅 hasChanged 并在它触发时调用一个方法来重新计算该行的总数。这行得通，但我想知道是否有更优雅的方法来解决这个问题？

【参考方案1】：

我找到了解决上述问题的方法。

如图所示的计算功能确实有效 - 问题是 Firefox 开发者版 - 不确定原因是什么，但在包括普通 Firefox 在内的所有其他浏览器中进行测试时 - 问题没有出现。