WhileTrue value binded to an observable

How-to Discussions
1

Hello,

I have a boolean observable. Is there a way to change the value of the observable with a Toggle without javascript.

Here is my code without Javascript handler:

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

    var connected = Observable(false);

    module.exports = {
        connected: connected
    };

</JavaScript>

<!-- In the UX -->
<Panel>
<WhileTrue  ux:Name="StatusChange" Value="{connected}">
...
</WhileTrue>
<Clicked>
    <Toggle Target="StatusChange"/>
    <DebugAction Message="{connected}" />
</Clicked>
</Panel>

I can do it with Javascrip handler and it is working very well but wanted to know if it could be done without. Here is the working code:

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

    var connected = Observable(false);
    var toggleSate = function () {
        connected.value = !connected.value;
    }

    module.exports = {
        connected: connected,
        toggleSate: toggleSate
    };

</JavaScript>

<!-- In the UX -->
<Panel>
<WhileTrue  ux:Name="StatusChange" Value="{connected}">
...
</WhileTrue>
<Clicked>
    <Callback Handler="{toggleSate}"/>
</Clicked>
</Panel>
2

That should be working according to this: https://www.fusetools.com/learn/fuse#toggle

Is it logging the wrong value or something?

3

The WhileTrue is correctly toggled but the value of the “connected” observable is not changed.

4

What fuse version are you on?

5

Version 0.12.4 but as I am playing with it for now just installed the pre-release 0.20.0 but still the same behaviour.

The WhileTrue is correctly toggled but not the observable value.

I give you a small complete code sample to test. The text in the WhileTrue is working with the toggle but the value of the connected observable is not changed in the Text neither in the monitor:

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

    var connected = Observable(false);

    module.exports = {
        connected: connected
    };

</JavaScript>


<StackPanel>
<WhileTrue  ux:Name="StatusChange" Value="{connected}">
<Text>Display if true</Text>
</WhileTrue>
<Text Value="{connected}"/>
<Button Text="Test">
<Clicked>
    <Toggle Target="StatusChange"/>
    <DebugAction Message="{connected}" />
</Clicked>
</Button>
</StackPanel>

</App>

```
6

Sorry for the late reply, before you posted I made my own similar test and notice that in my project before 0.20 that I used to change it in js. Now either this is a bug or purposely intended. I’m trying to think of a reason why this would be intended, but I can’t think of one since the WhileTrue would change if you changed it only through js, instead of Toggle. It might just be a bug that was never discovered because its been like this for a while.

7

Thanks for your answers and for testing it. As I told it is not a big deal but I was just curious if I did something wrong.

When you say that before 0.20 you did it with JS, does it mean that with 0.20 it is working on your side? Because I tried with 0.20 and the behaviour is still the same on my side.

8

No I thought it worked, but I was doing it with js the whole time

9

Thanks again for your reply. By playing further I found a workaround. I tried to bind a Switch to the observable and it was working. So if I toggle the switch with the button it is working. By hiding the switch I can have the toggle working from my button without JS. Not very clean but it works.

Here is the code:

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

        var connected = Observable(false);

        module.exports = {
            connected: connected
        };

    </JavaScript>


    <StackPanel>
        <WhileTrue Value="{connected}">
            <Text>Display if true</Text>
        </WhileTrue>
        <Text Value="{connected}"/>
        <Button Text="Test">
            <Clicked>
                <Toggle Target="StatusChange"/>
                <DebugAction Message="{connected}" />
            </Clicked>
        </Button>
        <Switch ux:Name="StatusChange" Value="{connected}" Visibility="Collapsed" />
    </StackPanel>

</App>
10

I’m not sure how many times you’re actually doing this, but you could do something like this:

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

        function createBoolean(val) {
          var bool = {
              val: Observable(val)
          }

          bool.toggle = function() {
              bool.val.value = !bool.val.value;
          }
          return bool;
        }

        var connected = createBoolean(false);

        module.exports = {
            connected: connected,
            log: function() {
                console.log('Connected Value:', connected.val.value);
            }
        }
    </JavaScript>

    <!-- In the UX -->
<Button ux:Name="btn" Text="Click">
    <WhileTrue ux:Name="StatusChange" Value="{connected.val}">
        <Change Target="btn.Text" Value="Changed" />
    </WhileTrue>
    <Clicked>
        <Toggle Target="StatusChange" />
        <Callback Handler="{connected.toggle}" />
        <Callback Handler="{log}" />
    </Clicked>
</Button>
</App>

But it’d probably be better to just do what you’re doing and make it a class or something

11

Thanks for your JS solution…

12

lol I know that’s what you wanted to avoid initially but that’s one way or like I said just make a class in ux, that does what your solution does. But that’s only if you need to do that multiple times in your app