在我的应用程序中,我需要有一些表格,其中包含必须加总的值行。我需要遍历这些行,为它们提供输入,然后构建一个在编辑输入时应该更新的总和。
这是一个简化的例子: 上课:
export class example {
items = [
{ id: 1, val: 100 },
{ id: 2, val: 200 },
{ id: 3, val: 400 }
];
get sum() {
let sum = 0;
for (let item of this.items) {
sum = sum + parseFloat(item.val);
}
return sum;
}
}
观点:
<div repeat.for="item of items" class="form-group">
<label>Item ${$index}</label>
<input type="text" value.bind="item.val" class="form-control" style="width: 250px;">
</div>
<div class="form-group">
<label>Summe</label>
<input type="text" disabled value.one-way="sum" class="form-control" style="width: 250px;" />
</div>
直到这里,一切都像我期望的那样发挥作用。但是:它一直在sum
进行脏检查,我担心在更复杂的应用程序中遇到性能问题。所以我尝试使用@computedFrom
装饰器,但这些版本都不起作用:
@computedFrom('items')
@computedFrom('items[0]', 'items[1]', 'items[3]')
@computedFrom('items[0].val', 'items[1].val', 'items[3].val')
在所有这些情况下,总和只计算一次,但在编辑值后不计算。最后2个不是很好的解决方案,因为我的模型中可以有不断变化的项目数量。
有什么建议我如何在不进行脏检查的情况下更改依赖的字段时更改的计算值?