When updating the value of an `Observable` in a `addSubscriber` function the frontend does not update.

General
1

Issue: When updating the value of an Observable in a addSubscriber function the frontend does not update.

Expected Outcome: The below code sample should display the value “Default Value” on the front end when the button is clicked 4 times and then is reset to “1” when pressed a 5th time.

Current Outcome: The value remains as “1222” and then is reset to “1” when pressed a 5th time.

In the MainView.ux file:

<App Theme="Basic" Background="#eeeeeeff">
    <StackPanel>
      <Panel>
          <Text Alignment="Center" Value="{inputValue}" />
      </Panel>
      <Button Text="Click Me">
        <Callback Handler="{updateInputValue}" />
      </Button>
    </StackPanel>
</App>

In the MainView.js file:

var defaultString = "Default Value";
var inputValue = Observable(defaultString);


var updateInputValue = function(args) {
    if(inputValue.value === defaultString) {
        inputValue.value = (1).toString();
    } else {
        inputValue.value += (2).toString();
    }
}

var checkInputValue = function() {
    if (inputValue.value.length >= 4 && inputValue.value != defaultString) {
        //if( isInputValueValid(inputValue.value) ) {
        // Force it to be wrong for testing
        if( inputValue.value === "1111" ) {
            //Done - remove subscribers
            inputValue.removeSubscriber(checkInputValue);
            inputValue.removeSubscriber(showInputValue);
        } else {
            //Wrong - reset value back to defaultString
            inputValue.setValueExclusive(defaultString, checkInputValue);
        }
    }
}

var showInputValue = function() {
    console.log( inputValue.value )
}


inputValue.addSubscriber(showInputValue);
inputValue.addSubscriber(checkInputValue);

module.exports = {
    updateInputValue: updateInputValue,
    inputValue: inputValue
};
2

Hi!

I am unable to test your code from here, but for debugging, can you please add some debug_log("message") to say, the inside of say checkInputValue and the various if-cases to see if the code is run at all?

3

Updated code below. This has been tested and does actually work, issue still exist

In the MainView.ux file:

<App Theme="Basic" Background="#eeeeeeff">
    <JavaScript File="MainView.js" />
    <StackPanel>
        <Panel>
            <Text FontSize="22" Value="{inputValue}" />
        </Panel>
        <Button Text="Click Me" Clicked="{updateInputValue}" />
    </StackPanel>
</App>

In the MainView.js file:

var Observable = require("FuseJS/Observable");
var defaultString = "Default Value";
var inputValue = Observable(defaultString);


var updateInputValue = function(args) {
    if(inputValue.value === defaultString) {
        inputValue.value = (1).toString();
    } else {
        inputValue.value += (2).toString();
    }
}

var checkInputValue = function() {
    if (inputValue.value.length >= 4 && inputValue.value != defaultString) {
        //if( isInputValueValid(inputValue.value) ) {
        // Force it to be wrong for testing
        if( inputValue.value === "1111" ) {
            //Done - remove subscribers
            console.log( "Done", inputValue.value )
            inputValue.removeSubscriber(checkInputValue);
            inputValue.removeSubscriber(showInputValue);
        } else {
            //Wrong - reset value back to defaultString
            console.log( "Wrong", inputValue.value )
            inputValue.setValueExclusive(defaultString, checkInputValue);
        }
    }
}

var showInputValue = function() {
    console.log( inputValue.value )
}


inputValue.addSubscriber(showInputValue);
inputValue.addSubscriber(checkInputValue);

module.exports = {
    updateInputValue: updateInputValue,
    inputValue: inputValue
};
4

Can you please read my above message?

5

Added the console.log in the if statments. On the forth click it should always state: Wrong 1222

Below is what is outputted on each click on console log

1 <!-- First Click -->
12 <!-- Second Click -->
122 <!-- Third Click -->

<!-- Forth Click -->
1222
Wrong
1222
Default Value

Below is screen shot of frontend on forth click. It should say Default Value instead of 1222

file

6

Thanks for reporting.

I can’t see anything wrong with your code, so this could be a bug on our end. Taking action to investigate.

7

Hi!

This bug has been found and will be fixed in an upcoming release :slight_smile:

Thanks a lot for reporting! I hope you are able to find a work-around for now