Fired when a property value is going to be set but is not set yet (before the change
event is fired).
You can control the final value of the property by using
the event's return
property.
observable.set( 'prop', 1 );
observable.on<ObservableSetEvent<number>>( 'set:prop', ( evt, propertyName, newValue, oldValue ) => {
console.log( `Value is going to be changed from ${ oldValue } to ${ newValue }` );
console.log( `Current property value is ${ observable[ propertyName ] }` );
// Let's override the value.
evt.return = 3;
} );
observable.on<ObservableChangeEvent<number>>( 'change:prop', ( evt, propertyName, newValue, oldValue ) => {
console.log( `Value has changed from ${ oldValue } to ${ newValue }` );
} );
observable.prop = 2; // -> 'Value is going to be changed from 1 to 2'
// -> 'Current property value is 1'
// -> 'Value has changed from 1 to 3'
Note: The event is fired even when the new value is the same as the old value.