Aurelia: computed / observed in repeat.for

Question

I have some editable data in a table with sums for rows and columns that need to be calculated.

Since I wanted to have simpler HTML, I use repeat.for to create table rows. To build the amount, I use the function that was the best way that I have come up with so far.

Unfortunately, the amounts are not updated this way when I edit the values. Getter functions could be evaluated, but they cannot accept a parameter.

, - ${$ parent.data [y] ['Q1'] + $parent.data [y] ['Q2'] +...}, ' Q1 ' - . 15 , - html .

, , . , szenario, , - Aurelia.

test.js

export class Test {
    data = {
        "2015": { "Q1": 7318, "Q2": 6215, "Q3": null, "Q4": 3515 },
        "2016": { "Q1": 1234, "Q2": 2345, "Q3": 3345, "Q4": 3000 },
        "2017": { "Q1": 4233, "Q2": 999, "Q3": 1234, "Q4": 3268 },
        "2018": { "Q1": 7375, "Q2": 4415, "Q3": 8415, "Q4": 1005 },
        "2019": { "Q1": null, "Q2": 5698, "Q3": 1254, "Q4": 6635 }
    };

    years() {
        return Object.keys(this.data);
    }

    sumY(y) {
        var sum = 0;
        Object.values(this.data[y])
            .forEach(function(item){
                sum += item;
            });
        return sum;
    }

    sumQ(q) {
        var sum = 0;
        Object.values(this.data)
            .forEach(function(item) {
                sum += item[q];
            });
        return sum;
    }
}

test.html

    <template>
    <table>
        <thead>
            <tr>
                <td>Year</td>
                <td>Q1</td>
                <td>Q2</td>
                <td>Q3</td>
                <td>Q4</td>
                <td>Sum</td>
            </tr>
        </thead>
        <tbody>
            <tr repeat.for="y of years()">
                <td>${y}</td>
                <td><input type="text" value.bind="$parent.data[y]['Q1']" /></td>
                <td><input type="text" value.bind="$parent.data[y]['Q2']" /></td>
                <td><input type="text" value.bind="$parent.data[y]['Q3']" /></td>
                <td><input type="text" value.bind="$parent.data[y]['Q4']" /></td>
                <td class="ansatz">${$parent.sumY(y)}</td>
            </tr>
        </tbody>
        <tfoot>
            <tr>
                <td>Sum</td>
                <td>${sumQ("Q1")}</td>
                <td>${sumQ("Q2")}</td>
                <td>${sumQ("Q3")}</td>
                <td>${sumQ("Q4")}</td>
            </tr>
        </tfoot>
    </table>
</template>

Answer 1

- , "", . "" .

Aurelia "" sumY sumQ ( ). , "" :

signal = 0;
attached() {
  this.interval = setInterval(() => this.signal++, 120);
}
detach() {
  clearInterval(this.interval);
}

, : http://plnkr.co/edit/3sXQM0

---

ObserverLocator . var observer = observerLocator.getObserver(obj, propertyName) , . var dispose = observer.subscribe(::this.computeSums). , computeSums , , , . , .