Question

我有一个使用Store来管理组件之间状态的Aurelia应用。

在我的下拉组件中，我进行了验证（不是框架验证，只有在更改时应在ViewModel中调用的代码），该验证应在值更改时触发：

<select value.bind="parameter.value"
        change.delegate="valueChanged()"
        class.bind="isValid ? '' : 'has-error'">
        ... 
</select>

在ViewModel中，验证工作如下：

@bindable() parameter: Parameter;

parameterChanged() {
    this.validate();
}    

valueChanged() {
    this.validate();
}

private validate() {
    this.isValid = this.parameter.value != '0';
}

参数模型如下：

export interface Parameter {
    value: string;   
    ...
}

Parameter由父组件向下传递到此组件，在该父组件中，值可以在由Store管理的状态对象上更改。

调用以下操作以更改State对象上的值时，该值可以更改：

export async function changeValue(state: State, value: string) {
    const newState = Object.assign({}, state);
    newState.setup.parameter.value = value;
    return newState;
}

当状态对象上的参数值更改时，下拉菜单在屏幕上会明显更改，但是parameterChanged()或valueChanged()不会触发。

有人知道这里发生了什么吗，我能解决这个问题吗？任何帮助表示赞赏...

Answer 1

因为我正在使用Aurelia Store，所以我应该一直使用如下状态更改的订阅：

@connectTo({
    selector: {
        parameter: (store) => store.state.pipe(pluck("parameter"))
    }
})

parameterChanged() {
    this.validate();
}

未能按预期运行的原因是：

valueChanged()绑定到元素的更改功能，因为该值正在更改，因此不会触发。
parameterChanged()未触发，因为parameter尚未更改，value的{{1}}属性正在更改

当Aurelia应用程序的价值发生变化时，事件不会触发

1 个答案: