WEIRD issue with observables

Just recorded a video showing the bug. As you can see changing observable variables does not trigger any redraw on the view layer. Is it a bug or am I doing something wrong?

https://www.dropbox.com/s/6iifsril67r3cm9/fuse_bug.mov?dl=0

Thanks for the video, but is it possible to share the code as well? Kinda hard to tell the pieces apart from the video alone. :slight_smile:

If you don’t want to share the code publicly you can try to shink it down to a test case that reproduces the issue or send us the project via this private Dropbox (only the Fuse dev team will have access to it, and only for debugging purposes obviously):https://www.dropbox.com/request/ZgndLtJQm5eGzG9cicGK

PS: the app looks really nice :slight_smile:

Can’t tell what you’re doing please show a minimun use case

Hi Bent,

Just sent you the source code via Dropbox.

Hi, could you let us know which files / variables / scenarios are relevant here? From the video it’s quite hard to see what part of the code you’re changing, and the full project is a bit much to start debugging without any further hints.

Hey Bent,

Any updates?

Hi Rainer, still waiting for more input from you, as requested in my last post. :slight_smile:

Remi, go to ServerBridge.js file and see the fetchPolitician function, and play with the politicianSelected observer variable.

It seems (after a bit of grep’ing) that politicianSelected is never actually consumed by anything in your .ux, is this correct?

That would explain the lack of updates. Basically, an observable has to be used by some UX to automagically update. You can find some more info about this here and here.

No, this is not correct. It is used by Vot/Panels/Politicians/PoliticianDetail/PoliticianDetail.ux

Sorry, my bad, I didn’t consider the subdirectories.

Anyway, I think that what you have in PoliticianDetail.ux will only update automatically if the properties you’re actually referencing are observables.

For instance, Value="{politicianSelected.disapproved_bills_count}" will only update if disapproved_bills_count is an Observable.

Ok. But how can I force the view to be reloaded without updating each key inside the hash?

var politicianSelected = Observable({ name: 'blah' })
politicianSelected.value = {}

// 'name' was changed here (it's not even an observer). 
// I want to reload the view at this point.
// How can I do that?

As far as I know there’s no simple way of doing that without suffering from race conditions with the UI. See this thread for a bit more info.

The simplest way to work around it might be by generating observables. Something along the lines of this :

function ObservableTree(properties){
    that = this;
    properties.forEach(function(k){
        khier = k.split('.');
        d = that;
        khier.forEach(function(subkey, idx){
            if( idx != khier.length - 1){
                if (!(subkey in d)){ d[subkey] = {}; }
                d = d[subkey];
            }
            else{ d[subkey] = Observable(); }
        });
    });
    this.updateTree = function(properties, data){
        dst = this;
        properties.forEach(function(k){
            khier = k.split('.');
            src = data;
            d = dst;
            khier.forEach(function(subkey, idx){
                d = d[subkey];
                src = src[subkey];
            });
            d.value = src;
        });
    };
}

politicianProps = ["kind",
    "name",
    // ....
    "classifications.Urgente",
    "classifications.Relevante"];

var politicianSelected = new ObservableTree(politicianProps);

and then doing this when you’ve fetched a new entry:

    politicianSelected.updateTree(politicianProps, politicianFetched);

I hope this can be of help. :slight_smile:

PS: The data fetched in fetchPolitician() doesn’t seem to have a fullsize_avatar_url (just the lower resolutionavatar_url) so you probably want to take that one from the other list.