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>

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';

Unregistering a model

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