我在表格中有一些可編輯的數據,其中要計算行和列的總和。Aurelia:Computed/Observable in repeat.for
因爲我想有更簡單的HTML代碼,我用repeat.for建表的行。爲了建立一個總和,我使用了一個函數,這是我現在提出的最好的方法。
不幸的是,當我編輯這些值時,總和不會以這種方式更新。 Getter函數將通過計算,但它們不能帶參數。
我知道我可以寫一些像$ {parent.data [y] ['Q1'] + $ parent.data [y] ['Q2'] + ...}但這會變得相當長,什麼是這個例子中的'Q1'在現實生活中將會是動態的。 而對於列的總和,我將有15行必須加以總結 - 我寧願不必爲html寫一個sum語句。
我正在看observatorlocator,但沒有得到我怎麼可以用我的情況。我認爲這是一個相當簡單的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>
謝謝,@Jeremy。我們什麼時候可以期待釋放綁定行爲功能?隨着測試? – doeck
是的,我們正在測試該測試版 –