Observable not working with function map

Bug Reports
1

Hi guys,

I’m stuck with Observable objects.

I’m making a simple registration page like this:

<DockPanel ux:Class="Registration">
    <JavaScript File="registration.js" />
    <StatusBarBackground Dock="Top" />
        <ScrollView>
            <TextInput Value="{name}" PlaceholderText="Insert Your Fist Name"/>
            <Button Height="50" Text="Register" Clicked="{Register}">
        </ScrollView>
</DockPanel>

This is my Javascript File:

var Observable = require('FuseJS/Observable');

var name = Observable("");

var isName = name.map(function(name){
    return name != "";
});

function Register(){
    debug_log(isName.value);
}

module.exports = {
    Register: Register,
    name: name
};

With the variable isName i check in real time if the variable name is not null.

But it doesn’t work in that way.

I see that this code works when i export the variable isName and if i ONLY USE IT in my ux file (for example if i use <Text Value="{isName}" />)

It doens’t works untill i use that variable in my ux file…

Why? D:

Thanks for the help! :slight_smile:

2

Hi!

Observables don’t compute until they are used (subscribed to) by someone. This happens when you use them in the UI. This is a common pattern with observables to avoid memory leaks when parts of the UI become unused.

You can also subscribe to your observables in javascript, like this:

isName.addSubscriber(function() {
    debug_log(isName.value);
});
3

Gotcha!

It helped me a lot.

Thanks! :slight_smile:

4

I did not know this. Thank you so much!

Quick question. How would I suscribe to my observables (as you mentioned)

You can also subscribe to your observables in javascript, like this:

isName.addSubscriber(function() {
    debug_log(isName.value);
});

in the following example? I want to print fullName.value to the console

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

            var firstName = Observable('John');
            var lastName = Observable('Doe');

            var fullName = Observable(function() {
                return firstName.value + ' ' + lastName.value;
            })

            console.log(fullName.value);
        </JavaScript>

    </Panel>
</App>