An observable data store, so that the data-binding plugin can listen to changes events

An HTML/SVG template that declares where the data will be rendered

Seam that will make understand the declarative bindings for data-binding

Require data-binding-plugin:

var DataBinding =require("data-binding-plugin");

The data-binding plugin binds the data from a model with an HTML view.

Initialize data-binding:

var dataBinding =newDataBinding();

Give it a model (an observable-store)

var Store =require("observable-store");

var store =newStore({

name:"data-binding"

});

Give the store to the data-binding plugin:

dataBinding.setModel(store);

The data-binding is a Seam plugin, so we need to new up Seam and add the plugin to it:

var Seam =require("seam");

var seam =newSeam();

seam.add("bind", dataBinding);

Now we can define the view. Whenever the name property is updated in the store, the innerHTML property of the DIV element is set with the value.

<divdata-bind="bind: innerHTML, name"></div>

And apply the data-binding plugin to the view.

seam.apply(document.querySelector('[data-bind]'));

When the store is updated, the view will reflect the change:

store.set('name','data-binding-plugin');

The data-binding plugin can update any property. This will update the className, which in turn sets the class attribute of the div element.

<divdata-bind="bind: className, class"></div>

Of course, a template can have several bindings:

<divdata-bind="bind: className, gender">

<spandata-bind="bind: innerText, name"></span>

<spandata-bind="bind: innerText, email"></span>

</div>

We can also have formatter. Instead of giving a className, we can specify a formatter function:

<divdata-bind="bind: formatDate, date"></div>

And when initializing the plugin, we add it a list of formatters:

var dataBinding =newDataBinding(model,{

formatDate: function(date){

// this is the dom element

this.innerHTML = formatDate(date);

}

});

Several parameters can be given to the formatter:

<divdata-bind="bind: formatDate, date, BST, ..."></div>

...

formatDate: function(date, timezone, ...){

//...

}

...

Data-binding plugin can also repeat a template if the model is an array:

<uldata-bind="foreach">

<li>

<spandata-bind="bind: innerText, firstname"></span>

<spandata-bind="bind: innerText, lastname"></span>

</li>

</ul>

With an array-based observable-store:

var store =newStore([{

firstname:'Mia',

lastname:'Wallace'

},

{

firstname:'John',

lastname:'McLane'

}]);

And when adding/updating/removing an item in the store, the DOM will be updated.

Finally, data-binding plugin comes with a virtualization option which allows you to render only parts of a longer list of items, so that only what's visible is actually rendered to save memory and improve performance:

<uldata-bind="foreach: list, 0, 10">

<li>

<spandata-bind="bind: innerText, firstname"></span>

<spandata-bind="bind: innerText, lastname"></span>

</li>

</ul>

This list will render 10 items from index 0, and will be called 'list'. In JavaScript, we can instruct the list to display the next items: