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

Для некоторых других идей, посмотрите на https://stackoverflow.com/a/32019971/725866