Aurelia：Computed/Observable in repeat.for

Question

我在表格中有一些可編輯的數據，其中要計算行和列的總和。

因爲我想有更簡單的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> 

Answer 1

當綁定的行爲特徵被釋放，我們就可以使用「信號」綁定行爲來命名值綁定和總和綁定。然後，當值綁定發生變化時，我們將能夠「發出」信號綁定刷新。

在當前版本的Aurelia中，您可以爲綁定表達式sumY和sumQ添加一個「信號」參數（無需將arg添加到視圖模型中的實際方法中）。然後在視圖模型添加以下代碼爲「信號」的綁定在某個區間：

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

這裏的工作plunker展示這種技術： http://plnkr.co/edit/3sXQM0

---

使用ObserverLocator將需要更多的更改您的代碼。您需要爲每個綁定到輸入值的屬性調用var observer = observerLocator.getObserver(obj, propertyName)。那麼你需要撥打var dispose = observer.subscribe(::this.computeSums)。接下來，您需要將總和函數重構爲實際屬性，以便computeSums可以更新它們的值，從而觸發總和綁定更新。最後，您需要在分離的方法中處理訂閱。