Bind props to DOM Elements

After you have defined and initialized a prop, you can bind it to different elements of the DOM by using the special data-bind attribute. After parsing this attribute, whenever any of the props mentioned change, its effects will be rendered immediately.

The syntax for data-bind is as follows:

HTML

<div data-bind="<strategy>:<component>.<prop>"></div>

You can specify multiple bindings by separating them with spaces or providing them in a json array of strings notation, but notice that as of right now, with only one binding strategy, they will conflict with each other.

HTML

<div data-bind="text:counter.count text:otherComponent.myProp"></div>

HTML

<div data-bind='[ 
    "text:counter.count", 
    "text:otherComponent.myProp" 
]'></div>

data-bind text

The most simple bind strategy is "text", where the innerText property of the HTML Element will be synced with the value of the property referred.

HTML

<div data-component="counter" data-props='{ "count": 0 }'>
    <span data-bind="text:counter.count"></span>
</div>

In this example, the <span> element will have its innerText property bound to the this.props.count property in the coutner component.

New bind strategies

New types of bind can be easily implemented and even extended by using a plugin type system.