Why use JavaScript for data-binding at all?

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

Using for mocking purposes if the Backend isn't implemented yet, the UI programmer can finish the whole UI using only JavaScript, CSS and HTML.
Registering 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-template="trait" data-bind-model="{{trait}}"></div>
</div>
<script type="text/html" data-bind-template-name="trait">
    <div data-bind-value="{{this.strength}}"></div>
    <div data-bind-value="{{this.intelligence}}"></div>
</script>

For more information about the data-binding attributes: Data Binding

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

Hybrid JavaScript Types with C++ Types

Another usage of JavaScript models is to extend an already existing JS object, exposed from C++, with new properties. Start by callingengine.extendModel(model, additionalProperties). For example:

// If the player object is already registered from the C++ code with properties name and health
// {name: 'Joe', health: 50}
engine.extendModel(player, {
    height: 1.80,
    items: [{
        itemName: 'hammer',
        power: 15
    }, {
        itemName: 'javelin',
        power: 10
    }]
});

This would add the properties 'height' and 'items' to the model player, then we can easily use them for the data-binding:

// Property from C++
<div data-bind-value="{{player.name}}"></div>
// Property from JavaScript
<div data-bind-value="{{player.height}}"></div>

Update and synchronization is done in exactly the same way like pure JavaScript models (engine.updateWholeModel/engine.synchronizeModels):

engine.updateWholeModel(player);
engine.synchronizeModels();

Important: Don't extend a model with an object/array property that already exists.

// 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.pet);
engine.synchronizeModels();

Table of Contents

Why use JavaScript for data-binding at all?

Working with pure JavaScript Types

Hybrid JavaScript Types with C++ Types