Reactive UI and Two Way Binding

Question

I think I'm missing something with how bindings and reactive ui work together.

Here's an example. I have a ToggleSwitch which is bound two way to an observable property in my View Model:

<ToggleSwitch IsOn="{Binding IsPowered, Mode=TwoWay}"/>

When the switch gets toggled from Off -> On I want to execute a piece of code, so I do the following:

this.WhenAnyValue(x => x.IsPowered).Subscribe(isPowered => 
{
    await MyService.UpdatePowerStatusAsync(isPowered);
});

This works fine when I toggle the button. However, say I perform a refresh on a background thread and get a notification from my server that IsPowered is now true (previously being false). I want to notify the ToggleSwitch in the UI to be in the right state so I set:

IsPowered = true;

But that then triggers the WhenAnyValue which calls my service with the new value, which I don't want to do because it's already true in the service.

Is there anyway to make sure that the WhenAnyValue only gets called due to user input? Like unsubscribe it during the update or something?

Answer 1

So if IsPowered becomes true from the ToggleSwitch and MyService has it false, then the Service must run the code; otherwise, if IsPowered is already true in MyService, MyService mustn't run the code.

Why don't you put an if in the MyService.UpdatePowerStatusAsync? Something like:

private bool _internalIsPowered;

UpdatePowerStatusAsync(bool isPowered)
{
    if (_internalIsPowered)
        return;

    //here all the code if _internalIsPowered is false

    _internalIsPowered = isPowered;
}

PS: you wrote "When the switch gets toggled from Off -> On"... if you don't need the Subscribe execution when IsPowered is off, use a Where clause:

this.WhenAnyValue(x => x.IsPowered)
    .Where(isPowered => isPowered) // execute only if the passed parameter is true
    .Subscribe(isPowered => 
        {
            await MyService.UpdatePowerStatusAsync(isPowered);
        });