Javascript Aurelia：重复计算/可观察。用于

我在一个表中有一些可编辑的数据，其中包含要计算的行和列的总和

因为我希望有更简单的html代码，所以我使用repeat.for来构建表的行。为了建立一个和，我使用了一个函数，这是迄今为止我想到的最好的方法

不幸的是，当我编辑值时，总和没有以这种方式更新。 Getter函数将被计算，但它们不能接受参数

我知道我可以编写类似${$parent.data[y]['Q1']+$parent.data[y]['Q2']+…}的东西，但这会变得相当长，在这个例子中的'Q1'在现实生活中是动态的。 对于列的求和，我将有15行必须求和——我不希望为此用html编写sum语句

我在看观测者定位仪，但不知道如何在我的案例中使用它。我认为这是一个相当简单的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>

年
Q1
问题2
第三季度
第四季度
总和
${y}
${$parent.sumY（y）}
总和
${sumQ（“Q1”）}
${sumQ（“Q2”）}
${sumQ（“Q3”）}
${sumQ（“Q4”）}

发布绑定行为功能后，我们将能够使用“信号”绑定行为来命名值绑定和总和绑定。然后，当值绑定更改时，我们将能够“发出”刷新总和绑定的信号

在当前版本的Aurelia中，您可以向

sumY

和

sumQ

绑定表达式添加一个“signal”参数（无需向视图模型中的实际方法添加arg）。然后在视图模型中，添加以下代码，以在一个间隔上“通知”绑定：

信号=0；
附（{
this.interval=setInterval（（）=>this.signal++，120）；
}
分离（）{
clearInterval（这个.interval）；
}

下面是一个正在工作的plunker，演示了这项技术：

---

---

使用ObserverLocator需要对代码进行更多更改。您需要为绑定到输入值的每个属性调用

var observer=observerLocator.getObserver（obj，propertyName）

。然后需要调用

var dispose=observer.subscribe（：：this.computeSums）

。接下来，您需要将sum函数重构为实际属性，以便

computeSums

可以更新它们的值，从而触发sum绑定进行更新。最后，您需要使用分离方法处理订阅。

谢谢，@Jeremy。我们什么时候可以期待绑定行为特性的发布？测试版？是的，我们的目标是beta@JeremyDanyow假设这是aurelia的最新版本，因为这篇评论发表已经三年多了。你有命名绑定方法的例子吗？Plunker的例子正是我想要的，而不是你@JeremyDanyow！