Aurelia：在 repeat.for 中计算/观察

Question

我在 table 中有一些 editable 数据，其中包含要计算的行和列的总和。

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

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

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

我正在查看 observatorlocator，但不知道如何将它用于我的案例。我认为这是一个相当简单的场景，所以我希望在 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

发布绑定行为功能后，我们将能够使用 "signal" 绑定行为来命名值绑定和总和绑定。然后我们将能够 "signal" 在值绑定更改时刷新总和绑定。

在 Aurelia 的当前版本中，您可以向 sumY 和 sumQ 绑定表达式添加一个 "signal" 参数（无需将 arg 添加到视图中的实际方法-模型）。然后在视图模型中将以下代码添加到 "signal" 间隔上的绑定：

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)。接下来，您需要将 sum 函数重构为实际属性，以便 computeSums 可以更新它们的值，进而触发 sum 绑定更新。最后，您需要在分离方法中处理订阅。

Aurelia：在 repeat.for 中计算/观察

Aurelia: Computed / Observable in repeat.for

javascript

aurelia