AF DataBinding CCC


AF DataBinding is a up coming Data Binding module for ApplicationFrame.

This library allows fast, high performant and extensible data binding.
With the integrated extension API it is possible to add custom bindings as desired.

Details

Bindings are processed synchronously but view updates happen asynchronously.
This allows the binding system to operate fast and non blocking.
Users also don't have to worry about accidentally starting multiple update cycles,
since there will be always be just one update cycle at the end of a call stack

How To

Everything is constructed from html templates. To use data binding on an element
simply move the element into a html template.

``html

`

$3

In order to bind data to a template it is required to tell the data binding engine
about the template

`JavaScript
import DataBinding from 'af-DataBinding';

let scope = {
itemText: 'test',
};

scope = DataBinding.makeTemplate('#my-binding-snippet', scope).scope;
`

This short snippet allows to get the template processed and receive an instance
of it. Since it is often not desired to only instantiate a template, a specific
attribute has been created.

`html

`

The replace attribute tells the binding engine to automatically replace
the template in the DOM with the new instance.
Therefore this would result in the following HTML snippet.

`html



`

$3

the current implementation of the engine allows to automatically repeat a part
of a template. This can be achieved with the following construct.

`html

`

Elementary in this example is the inner template element. It will get
automatically repeated, for every element in the items` array on the scope,
when the surrounding template gets instantiated.