How to use Observables correctly

How-to Discussions
1

I have an Observable containing list of objects, and binded to a Each that display one of the object property. Everything works great so far.

Then, I want to have a function that will update the Observable objects’ properties. console.log shows that the data is updated, but the UX is not updated accordingly.

One of the workaround I found is something like t_obs.replaceAll (t_obs.toArray ()) at the end of the update function, but I doubt this is the right way to make things work. Any suggestion appreciated.

<JavaScript>

var t_obs = Observable ({is_flag: true},{is_flag: false},{is_flag: false});

function update_flags ()
{
    t_obs.forEach
    (
        function (t_object)
        {
            t_object.is_flag = !t_object.is_flag;
        }
    );    
}

module.exports =
{
    t_obs: t_obs,
    update_flags: update_flags
};
</JavaScript>

<Each Items="{t_obs}">
    <SomeComponent is_flag="{is_flag}" />
</Each>

<Button text="Swap flags" Clicked="{update_flags}" />
2

The value that is being changed need to be an Observable for it to fire for it’s listeners:

var t_obs = Observable ({is_flag: Observable(true)},{is_flag: Observable(false)},{is_flag: Observable(false)});

function update_flags ()
{
    t_obs.forEach
    (
        function (t_object)
        {
            t_object.is_flag.value = !t_object.is_flag.value;
        }
    );}
3

Thanks, Bjørn-Olav Strand.

I don’t realize I can have nested Observables.