带有过滤值转换器的 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;
});
与此类似 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;
});