HTML Data Binding Dynamic

Dynamic data binding is the default data binder in Gameface.

Overview

Dynamic data binding allows you to add, remove, and change elements with data binding attributes through JavaScript. The feature also allows you to add such attributes to already existing elements.

Modifying the attributes

Adding, changing and removing data-bind attributes is done the same way as any other HTML attribute.

let element = document.getElementById("target-id")

// to add a data bind attribute
element.setAttribute("data-bind-value", "{{model.prop1}}")

// to change the expression of data-bind-value to something else:
element.setAttribute("data-bind-value", "{{model.prop2}}")

// the changes are will be visible after synchronization  
engine.updateWholeModel(model);
engine.synchronize();
element.removeAttribute("data-bind-value")

// data-bind-value will no longer change the text content of the element
engine.updateWholeModel(model);
engine.synchronize();

Elements with data-bind attributes

Elements with data-bind attributes will only start their update cycle once they are included in the DOM. If an element has not been included in the DOM yet, engine.synchronize() will not have an effect on it. Furthermore, when an item is removed from a document engine.synchronize() will no longer update that item.

Performance improvements

Dynamic data binding will calculate every {{data-bind-expression}} once even when the exact same expression is used in many different elements and attributes. This reduces memory consumption and improves CPU performance in most cases.

CSS Properties

Every CSS property Gameface supports now supports data-bind attributes. The naming data-bind-style-PROPERTYNAME is used to refer to those attributes, where PROPERTYNAME is the name of the property.

<div data-bind-style-font-size="{{model.fontSize}}"
    data-bind-style-left="{{model.left}}"
    data-bind-style-top="{{model.top}}"
    data-bind-style-width="{{model.width}}"
    data-bind-style-height="{{model.height}}"
    data-bind-style-opacity="{{model.opacity}}"
    data-bind-style-color="{{model.textColor}}"
></div>
← Grapesjs
HTML Lint →