Change an Observable from Uno

How-to Discussions
1

Hi,

Does anyone have any examples on changing an Observable from Uno code? I’ve tried several things, but I doesn’t change in JS.

  • Bjørn-Olav
2

Hi,

If you have a Fuse.Scripting.Object which is the Observable, you should be able to do

obj.CallMethod("setValueExclusive", value);
3

Hi,

I would like to have a UX like this:

<MyAwesomeElement Property="{js_prop}" />

And then change that from Uno. I’ve tried this:

foreach (var b in Behaviors) {
    if (b is Fuse.Reactive.DataBinding<float2>) {
        var db = b as Fuse.Reactive.DataBinding<float2>;
        db.Unknown(newvalue);
    }
}

This is my other try, using StyleProperty:

    public static readonly StyleProperty<BindPanel, float2> SizeProperty
        = new StyleProperty<BindPanel, float2>(float2(0,0), null, SetSize, GetSize);

    float2 _size = float2(0,0);
    public float Size
    {
        get { return _size; }
        set { 
            SizeProperty.Set(this, value);
        }
    }

    static float2 GetSize(BindPanel p)
    {
        return p._size;
    }

    static void SetSize(BindPanel p, float2 size)
    {
        p._size = size;
    }

    public void SetSize(float2 size, object origin)
    {
        _size = size;
        SizeProperty.SetLocalState(this);
    }

But still no luck.

4

What you are trying to do is sort of an antipattern. JS feeds the UI with values, not the other way around. The only exception is two-way data binding-enabled properties like TextInput.Value, but I don’t think that covers this case either.

Can you instead try to describe what you are ultimately trying to do here? What is the use case?

5

I am trying to do something like this:

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

        var size = Observable([0,0]);
        var imageurl = Observable('');
        function setUrl () {
            imageurl.value = 'http://example.com/dynamicimage?w=&#39; + size.value.X + '&h=' + size.value.Y;
        }

        module.exports = {
            size: size,
            imageurl: imageurl
        }
    </JavaScript>
    <Panel Size="{size}">
        <Image Url="{imageurl}" />
    </Panel>
</App>