Value of Observable set inside a function won't react

How-to Discussions
1

I don’t understand how to make react an observable which value is set inside a function. For example, in the following code myValue won’t change despite it’s declared as an observable. By clicking the button the string “Hallo!” should be displayed, but it does’nt (console logs correctly). Proof of the fact that myValue is a ‘working’ observable is that if you uncomment myValue = "FUSE" the observable reacts correctly.

<App>
    <JavaScript>
        var Observable  = require("FuseJS/Observable");
        var myValue = Observable();

        //myValue = "FUSE";

        function clickMe() {
            console.log(myValue);
            myValue = "Hallo!";
        };

        module.exports = {
            myValue: myValue,
            clickMe: clickMe
        }
    </JavaScript>

    <ClientPanel>
        <StackPanel Alignment="Center">
            <Text Value="{myValue}" />
                 <Button Text="Click">
                     <Clicked Handler="{clickMe}" />
                 </Button>
        </StackPanel>
    </ClientPanel>
</App>
2

Hi Enrico,

you have to refer to single-value Observables by .value. So in your code, replace

myValue = "Hallo!";

with

myValue.value = "Hallo!";

Here’s something to get you going with Observables: https://www.fusetools.com/docs/fusejs/observable

3

Thank you Uldis. Now it seems so easy… :-((
I read many times the Docs and watched the videos too. I’m aware I still have difficulties to understand some critical (and basical) aspects of Fuse.

4

No worries Enrico, we all started somewhere. Fuse on! :slight_smile:

5

Hi with regard to obvervables as for my case I am planning to use perhaps traditional RxJS. So in this case is that mandatory for us to import “FuseJS/Observable”?

6

Perhaps I should define my question more clearly. What I mean is that I would like to fire some events in another page in order to change the value in one page. The approach in your documentation is by making a “Context”, but it seems that it is not the sort of Redux store in React sense so manually making a Context object is quite difficult to debug. I would prefer not to have a “Context” but just go straight ahead emit an event to change the value in another page.

7

Hi I just noticed that we can actually use your EventEmitter class to achieve this purpose. Perhaps would you please write some examples in the tutorial?

8

With regard to EventEmitter, I have a question.

So for the EventEmitter I assume that for the instance should be declared inside a Javascript file and then let other pages import it right. So to define the “on” operator or subscribing I would like to ask can I put those functions not in the Javascript files but in any other pages?

Tell me if you want any sort of clarification, as I know that it is a bit difficult to explain.

9

Clifflo: Those are good questions, but please create new threads for questions that are not directly related to the current thread. You’re thread hijacking.

10

Fine. I would later create a new thread with regard to the EventEmitter. Thanks.