The data-binding feature allows you to populate your HTML elements based on the current state of the game. For example, if you want to display the player's health somewhere on the page this can be achieved with a one-liner:

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

Our system will make sure that anytime the player's health changes, the UI is updated. On the game side, this feature requires you to do 3 things:

Tell HB what game objects you'd like to expose. Any such exposed object we call a data model.

From Blueprints call the UHummingbirdBaseComponent::CreateDataModelFromStruct / UHummingbirdBaseComponent::CreateDataModelFromObject depending on whether you want to expose a UObject instance or a USTRUCT. From C++ the same can be achieved with cohtml::View::CreateModel:

HBComponent->GetView()->CreateModel("player", Player);

Next, when something in the model has changed in the game, you need to tell HB that it needs to be updated in the UI.

From Blueprints use UHummingbirdBaseComponent::UpdateWholeDataModelFromStruct / UCoherentUIGTBaseComponent::UpdateWholeDataModelFromObject. From C++ use cohtml::View::UpdateWholeModel:

HBComponent->GetView()->UpdateWholeModel(Player);

Calling the update methods from the previous step does not actually update the UI - these methods only mark certain pieces of it as dirty. To avoid constant UI updates, this is done in another method which walks through all elements that need updates and syncs them with the game.

From Blueprints use UHummingbirdBaseComponent::SynchronizeModels. From C++ use cohtml::View::SynchronizeModels:

GTComponent->GetView()->SynchronizeModels();

A complete Blueprint script may look like this:

Working with data-binding from Blueprints

This was only a brief introduction to data-binding. For full information about the data-binding feature - e.g. what other bindings are available (aside from data-bind-value), how it works under the hood and advanced usage - see our native docs at http://coherent-labs.com/Documentation/cpp-hb/.