带有过滤值转换器的 Aurelia Array Observer

Aurelia Array Observer with a Filtering Value Converter

与此类似 issue,我正在尝试设置一个 Array Observer 来观察字符串数组(在过滤器 ValueConverter 中使用),然后在数组更改时触发重新评估。

以下是我目前拥有的。到目前为止,当 checking/unchecking selectedFeatures 时,观察者回调被调用。但是,ValueConverter 在初始加载后永远不会被调用。

数组观察器:

import {inject, ObserverLocator} from 'aurelia-framework';
import {HttpClient} from 'aurelia-fetch-client';
import 'fetch';

@inject(HttpClient, ObserverLocator)
export class Home{
    flagPropertyName = false;
    selectedFeatures = [];

    constructor(http, observerLocator){
        var subscription = observerLocator
            .getArrayObserver(this.selectedFeatures)
            .subscribe(this.onFeaturesChanged);
    }

    <activate omitted>

    onFeaturesChanged(mutations) {
        this.flagPropertyName = !this.flagPropertyName;
    }
}

export class FilterPlaceValueConverter {
    toView(places, expected){
        console.log(JSON.stringify(expected));
        <code omitted>
}

在视图中:

绑定所选功能:

<label repeat.for="feature of features">
    <input type="checkbox" checked.bind="$parent.selectedFeatures" value.bind="feature.name" />
    ${feature.name}
</label>

绑定值转换器:

<div repeat.for="place of places | filterPlace:selectedFeatures:flagPropertyName">

我粗略的理解是,在 onFeaturesChanged 回调中更新 flagPropertyName 会强制 repeat.for 在任何时候修改 selectedFeatures 数组时调用 ValueConverter。

这解决了问题:

constructor(http, observerLocator){
    observerLocator
        .getArrayObserver(this.selectedFeatures)
        .subscribe(() => {
            this.testFlag = !this.testFlag;
        });