QuickStart: Fuse and Realtime Model

Get going with some fast hands on examples.

Introduction

This QuickStart shows you how to connect Fuse UI components to an AppStax collection with live updates. Download the examples and follow along with the code below. This example is found in examples/quickstart-realtime-model/

To run the code you need to install Fuse and open the project in examples/quickstart-realtime-model/ with Fuse and preview it on a physical iOS or Android device.

Try it with more devices

Realtime communication isn't much fun with only one device connected. To really see the effect of Realtime Model you need two devices or apps connected to the same data. If you don't have access to that, you can open the JavaScript Realtime Model QuickStart page in your browser. It uses the same todos collection as this example, so any changes you make will flow between that page and the app you run in this example.

Connecting to the data

To connect to a collection the app creates a model and calls .watch(). The model is then wrapped in an Observable when it is exported to the view.

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

var model = appstax.model();
model.watch("todos");

module.exports = {
    model: model.observable(Observable)
};

Adding more data

To add data, Realtime Model uses the same code as the Data Storage QuickStart. To add an item, its text is read from an Observable and stored in a new object in the todos collection:

var newItem = Observable("");

function addItem(args) {
    var item = appstax.object("todos");
    item.title = newItem.value;
    item.completed = false;
    item.save();
    newItem.value = "";
}

module.exports = {
    newItem: newItem
}

Updating data

When marking an item as completed, the app uses the special model.save(object) instead of object.save() to make the local model update instantly:

function toggle(args) {
    var item = args.data;
    item.completed = !item.completed;
    model.save(item);
}

Complete app

<App>
    <JavaScript File="WebSocket/WebSocket.js" />
    <JavaScript File="appstax.js" ux:Global="appstax" />
    <JavaScript File="MainView.js" />
    <DockPanel>
        <StatusBarBackground Dock="Top"/>
        <BottomBarBackground Dock="Bottom"/>
        <StackPanel>
            <TextInput PlaceholderText="Type a new todo here..." 
                       Value="{newItem}"
                       PlaceholderColor="#CCC" Padding="20"
                       ActionStyle="Done" 
                       ActionTriggered="{addItem}" />
            <Each Items="{model.todos}">
                <Grid RowCount="1" Columns="20,auto" Color="#FAFAFA" 
                      Padding="20,10" Margin="1" Clicked="{toggle}">
                    <Checkbox />
                    <Panel Column="1" Padding="10">
                        <Text Value="{title}"/>
                    </Panel>
                </Grid>
            </Each>
        </StackPanel>
    </DockPanel>

    <Button ux:Class="Checkbox">
        <Match Value="{completed}">
            <Case Bool="true">
                <Rectangle Color="#0CA" Width="20" Height="20">
                    <Stroke Color="#000"/>
                </Rectangle>
            </Case>
            <Case Bool="false">
                <Rectangle Color="#FFF" Width="20" Height="20">
                    <Stroke Color="#000"/>
                </Rectangle>
            </Case>
        </Match>
    </Button>
</App>
var Observable = require("FuseJS/Observable");
var appstax = require("appstax");
appstax.init("NkxXMTRibGhEWHBLcg==");

var model = appstax.model();
model.watch("todos");

var newItem = Observable("");

function toggle(args) {
    var item = args.data;
    item.completed = !item.completed;
    model.save(item);
}

function addItem(args) {
    var text = newItem.value;
    if(text.length == 0) {
        return;
    }
    var item = appstax.object("todos");
    item.title = text;
    item.completed = false;
    item.save();
    newItem.value = "";
}

module.exports = {
    model: model.observable(Observable),
    toggle: toggle,
    newItem: newItem,
    addItem: addItem
};

Note: This QuickStart uses a shared app key for everyone viewing these examples, so don't be suprised when data appears that you didn't add yourself. Sign up for a free trial to get your own app key to use instead.

What's next?

More QuickStart Guides

Set up your own app project on your computer