@af-modules/databinding

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.

<template id="my-binding-snippet">
    <div class="item">{{itemText}}</div>
</template>

Bind a Template

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

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.

<template id="my-binding-snippet" replace>
    <div class="item">{{itemText}}</div>
</template>

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.

<div class="item">test</div>

repeat a template

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

<template id="something-something" replace>
    <ul>
        <template bind-repeat="item in items">
            <li>{{item}}</li>
        </template>
    </ul>
</template>

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.