Aurelia:绑定到计算值

Question

在我的应用程序中,我需要有一些表格,其中包含必须求和的值行.我需要循环遍历这些行,为它们提供输入,然后构建一个在编辑输入时应该更新的总和.

这是一个简化的例子:该类:

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个不是很好的解决方案,因为我的模型中可以有不断变化的项目数量.

有什么建议我怎么能得到一个计算值,当它依赖的字段改变而没有脏检查？

Answer 1

使用@computedFrom该项目val的道具:

import {computedFrom} from 'aurelia-framework';

export class Item {
  constructor(id, val, parent) {
    this.id = id;
    this._val = val;
    this.parent = parent;
  }

  @computedFrom('_val')
  get val() {
    return this._val;
  }
  set val(newValue) {
    this._val = newValue;
    this.parent.calculateSum();
  }
}

export class Example {
  sum = 0;

  items = [
    new Item(1, 100, this),
    new Item(2, 200, this),
    new Item(3, 400, this)
  ];

  constructor() {
    this.calculateSum();
  }

  calculateSum() {
    let sum = 0;
    for (let item of this.items) {
      sum = sum + parseFloat(item.val);
    }
    this.sum = sum;
  }
}

对于其他一些想法,请查看/sf/answers/2241398001/