How to change clickability based on state?

How-to Discussions
1

If I have a particular Observable in my state, how would I disable Clicked on a component based on this state?
In pseudo code:

<Panel Clickable="{ready}" Clicked="{...}"/>

Can I do it on the Panel, or would I separate the two states like this:

<WhileTrue Value="{ready}">
  <Panel Clicked="{...}"/>
</WhileTrue>
<WhileFalse Value="{ready}">
  <Panel/>
</WhileFalse>

Thanks!

2

How about something like this?

<Panel>
    <WhileTrue Value="{ready}">
        <Clicked Handler="{...}" />
    </WhileTrue>
</Panel>
3

Awesome. Just out of interest, what happens if I do this?

<Panel Clicked="{a}">
  <WhileTrue Value="{ready}">
    <Clicked Handler="{b}" />
  </WhileTrue>
</Panel>

Does b override a?

4

No, it doesn’t override it. When {ready} is true, both {a} and {b} will be called on a click.

5

Ok, so if I have a component like this:

<Panel ux:Class="my.Button">
  <object ux:Property="Disabled" />
</Panel>

…and another component attaches a click handler:

<my.Button Clicked="{a}" Disabled="{disabled}"/>

I want to “somehow” disable the Clicked handler when {disabled} is true.

Is this possible when using Clicked? Or would I need to use a custom property for the click handler?

6

(Ideally I would want to put this logic inside my.Button, rather than outside it)

7

Use the property just for the visual style within the component. When using an instance of the button, do it so:

<my.Button Disabled="{disabled}">
    <WhileFalse Value="{disabled}">
        <Clicked Handler="{a}" />
    </WhileFalse>
</my.Button>

The problem is that you need to put the reference to {a} callback in the data context where it’s available.

You can, of course, put the WhileFalse inside of the component itself, and Fuse will automatically look up the tree and try to figure out where {a} lives. Depending on how many instances of {a} you have, and on what levels, it may or may not hit the right one.

8

Oh, and there’s IsEnabled that you’ll want to take a look at!

9

Ok, thanks. Decided to go with this in then end I think.

<Panel ux:Class="my.Button">
  <object ux:Property="Pressed" />
  <object ux:Property="Disabled" />
  <WhileFalse Value="{ReadProperty Disabled}">
    <Clicked Handler="{ReadProperty Pressed}" />
  </WhileFalse>
</Panel>

So it’s easier to use the button each time, eg:

<my.Button Pressed="{a}" Disabled="{disabled}"/>

Thanks for your help!

10

A-ha, so actually it’s as simple as:

<Panel ux:Class="my.Button"/>

<my.Button Clicked="{a}" IsEnabled="{ready}"/>

Is there any way to do simple negation, eg:

<my.Button Clicked="{a}" IsEnabled="{!disabled}"/>

?

11

It looks like we are indeed missing some negation UX expressions. We’ll not need… we’ll need to not… we’ll not need to not… We’ll need to fix that.

In the mean time, you will need to do the simple negation in JS.

var Observable = require("FuseJS/Observable");
var bool = Observable(true);
var invertBool = bool.map(function(x) {
    return !x;
});
12

Ok, not a problem :slight_smile:
Negation would definitely be useful though!