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可以更新它们的值，从而触发总和绑定更新。最后，您需要在分离的方法中处理订阅。