/ fuse

Observable Inputs with Fuse

In this article, we're going to look at using Observables within our Fuse applications. We'll specifically be looking at this in context of user input. If you haven't seen Fuse before, it's an awesome set of development tools that allow you to create cross platform mobile applications, download the tools here!.

What are Observables?

If you've used RxJS before, you'll be aware of what an Observable is. It allows us to subscribe to a stream of data, which makes it especially useful for form inputs.

Let's take a look at this in the context of Fuse:

$ fuse create app FuseObservables

$ cd FuseObservables

$ fuse preview
Observables

Inside of our MainView.ux, we can add a JavaScript tag that contains a reference to Observable. This allows us to create a variable as an Observable which means that any changes on the front-end (or vice versa) will reflect the variable's value.

I've exported a value named name with the value of "Paul". We're then displaying this on screen by binding the Value to our exported variable.

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

        module.exports = {
            name: name
        }
    </JavaScript>

    <Text Value="{name}"></Text>
</App>

Our application now says "Paul" on screen. To show that this value can be edited (and thus updating the UI), we can create a TextView with the same value.

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

        module.exports = {
            name: name
        }
    </JavaScript>
    
    <StackPanel>
        <TextView Value="{name}"></TextView>
        <Text Value="{name}"></Text>
    </StackPanel>
</App>

If we update the value of our TextView, the Text will also change. This is because Fuse is automatically subscribing to our Observable and therefore watching for any changes.

We can also look at running particular code when the value changes. If we hook into onValueChanged, we can log out the specific item or make other changes to our project.

name.onValueChanged(module, function(item){
    console.log(item);
})

This will then show the name of the item inside of our TextView within the console. This would be a good place to add any specific validators or anything that depends on the value of an editable item.

If you haven't got the new Fuse Visual Studio Code extension, now's the time! Check it out here.

Paul Halliday

Progress Telerik Developer Expert. Course author with students in 110+ countries. BSc (Hons) Computer Science @ UoS. Google accredited Mobile Site professional.

Read More