3.0 beta 2

Updates

The main feature of ActiveWidgets templates is automatic synchronization between the component state and the generated DOM tree. Any change in the component properties triggers automatic granular update of the relevant DOM nodes.

The library parses each template and calculates relative CSS selectors, functional expressions and its dependencies for each of the dynamic elements included into the template. The property change events then lead to the partial recalculation and updates of the template fragments or individual attributes, classes or styles.

To work efficiently this approach requires that each of the dynamic elements of your template can be uniquely identified relative to the parent element by the css selector path. In practice, it just means having a unique css class name attached to each template element containing dynamic expression.

<div>
    <div class="block1">{{@value1}}</div>
    ...
    <div class="block2">{{@value2}} {{@value3}}</div>
</div>

In the above template the 'block1' fragment is more efficient as value1 can be easily located via div>.block1 selector and then using innerHTML property of the selected DOM node.

The 'block2' fragment is less optimal because we cannot address value2 and value3 separately. So to update one of them we would need to calculate both and update the whole fragment. Usually it does not have much impact on performance if the fragment is relatively small. However if you are putting a really large chunk of html in value2 or value3 it is better to split them into separate regions and give each a unique class name.

The template engine can easily update individual class names, styles or attributes. Only one unique class name should be static.

<div class="product-form {{@form-state}}" style="width:{{@form-width}}">{{@content}}</div>

In this example the product-form class will be sufficient to allow efficient updates of all the expressions in the template.