WhileTrue not updating when Observable updated from JS

General
1

Expected: If I enter four digits the button should be enabled. If I enter more than four values the valueChanged function will remove the additional values and return a string with a length of four. If these four values are four digits the button should be enabled.

Currently: If I enter exactly four digits the button is enabled. However, if I enter more than four values the valueChanged function will remove the additional values and return a string with a length of four. If these four values are four digits the button remains disabled. Deleting the fourth digit and adding it back in will enable the button.

I am sure I am doing something stupid here and missing something obvious. Any help or guidance on this would be greatly appreciated.

In an external JS file:

var Observable = require('FuseJS/Observable');
var inputValue = Observable("");
var isValid = Observable( function() { return inputValue.value.length === 4 && /\d{4}/.test(inputValue.value) } );

var valueChanged = function (args) {
    if(args.value.length > 4) {
        inputValue.value = args.value.substring(0, 4)
    }

    console.log( isValid.value, inputValue.value )

}


module.exports = {
    inputValue: inputValue,
    isValid: isValid,
    valueChanged: valueChanged
};

In the UX file:

<TextInput ux:Name="textInput" ValueChanged="{valueChanged}" Value="{inputValue}" />
<Button Value="Enter" IsEnabled="False" ux:Name="enterButton"  />
<WhileTrue Value="{isValid}">
 <Change enterButton.IsEnabled="True" />
</WhileTrue>
2

Hi,

This is certainly somewhat strange, but it could be due to async issues when mixing observable logic with manual event handling.

Instead of listening to ValueChanged try doing:

 var corrector = function() {
     if (inputValue.value.Length > 4) {
         inputValue.setExclusive(..., corrector);
     }
 }

 inputValue.addSubscriber(corrector);

This should ensure consistent synchronous ordering when handling the events.

Note how we use setExclusive to avoid infinite feedback when updating the inputValue in response to a change.

3

Hi Anders

Thanks for this, very helpful.

Quick question is setExclusive different from setValueExclusive?