1

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

在我的下拉组件中，我有验证（不是框架验证，只是应该在 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()不触发。

有谁知道这里发生了什么以及我可以尝试解决的任何问题？任何帮助表示赞赏...

4

1 回答 1

4

因为我使用的是Aurelia Store，所以我应该使用状态更改订阅，如下所示：

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

parameterChanged() {
    this.validate();
}

这没有按预期工作的原因是：

  • valueChanged()绑定到元素的更改函数，因为值正在更改，所以不会触发。
  • parameterChanged()不会触发，因为parameter没有改变，的value属性parameter正在改变
于 2018-08-01T18:48:37.330 回答