Events not firing when value changes in Aurelia app

Question

I have an Aurelia app using Store to manage state between components.

In my dropdown component I have validation (not framework validation, just code which should get invoked in the ViewModel on change) which should fire when the value changes:

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

In the ViewModel the validation works like this:

@bindable() parameter: Parameter;

parameterChanged() {
    this.validate();
}    

valueChanged() {
    this.validate();
}

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

The Parameter model looks like:

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

The Parameter is passed down to this component by a parent component where the value can change on a state object managed with Store.

The value can change when the following action gets invoked to change the value on the State object:

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

When the parameter value changes on the state object the dropdown visibly changes on the screen, but parameterChanged() or valueChanged() do not fire.

Does anyone know what is happening here and anything I can try to resolve this? Any help appreciated...

Answer 1

Because I am using Aurelia Store I should have been using a state changed subscription as follows:

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

parameterChanged() {
    this.validate();
}

The reasons why this wasn't working as expected are:

• valueChanged() is bound to the element's change function, since the value is changing this will not fire.
• parameterChanged() does not fire because parameter hasn't changed, the value property of parameter is changing