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

在项目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; 
    } 
} 

对于一些其他的想法，看看https://stackoverflow.com/a/32019971/725866