Aurelia：绑定到计算值

Question

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

这是一个简化的例子： class:

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 装饰器，但这些版本的 none 有效：

@computedFrom('items')

@computedFrom('items[0]', 'items[1]', 'items[3]')

@computedFrom('items[0].val', 'items[1].val', 'items[3].val')

在所有这些情况下，总和只计算一次，而不是在编辑值之后计算。最后两个不是好的解决方案，因为我的模型中的项目数量可能会发生变化。

有什么建议我可以在不进行脏检查的情况下更改它所依赖的字段时如何获得更改的计算值吗？

Answer 1

在项目 val 上使用 @computedFrom 道具：

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

如需其他一些想法，请查看

Aurelia：绑定到计算值

Aurelia: Binding to computed values

javascript

aurelia