Pure JavaScript Data Binding

Gameface allows you to use JavaScript instead of C++ for the purposes of data binding. See Data binding overview for the backend equivalent.

Why use JavaScript for data binding at all? #

Data binding JavaScript values lets you create the UI without any C++. For example, you can:

• use for mocking purposes if the backend isn’t implemented yet, the UI programmer can finish the whole UI using only JavaScript, CSS and HTML.
• register data models that are coming from AJAX requests.

Working with pure JavaScript Types #

The API is mostly the same as in the C++ version. You start by registering a JavaScript model by calling engine.createJSModel(modelName, model).

For example:

    engine.createJSModel('player', {
        maxHealth: 100,
        currentHealth: 50,
        heroType: 'warrior',
        pet: {
            type: 'dog'
        },
        traits: [{
            strength: 10,
            intelligence: 20
        }, {
            strength: 15,
            intelligence: 17
        }]
    });

This would create a global variable player with the given properties. We can use this model with data binding attributes like:

    <div data-bind-value="{{player.currentHealth}}"></div>

    <div data-bind-for="trait:{{player.traits}}">
        <div data-bind-value="{{trait.strength}}"></div>
    </div>

For more information about the data binding attributes: Data binding overview

To update the JavaScript models we use similar functions like the C++ - engine.updateWholeModel(model). This function only notifies the SDK that this model has changed. To force an update of the data-bound values (update the DOM) you must also call engine.synchronizeModels.

// Changing the object property like this won't work.
player.pet = { type: 'cat'};

// Instead you can do this:
player.pet.type = 'cat';
engine.updateWholeModel(player);
engine.synchronizeModels();

Unregistering a model #

Calling engine.unregisterModel(player) will unregister this model and remove the global variable that is associated with it.