Data binding

One of the most powerful two-way data-binding tools available. It has a bunch of really cool features:

• It can be extended with plugins so that virtually any behavior can be triggered on model update.
• It can generate DOM elements for you based on a pure HTML template and repeat them to render a list of items.
• The rendering of lists of items can be virtualized so that not all of the items get rendered, improving performance and memory consumption.
• It's so fast that it's the perfect tool for mobile devices too.
• It's extensively tested to prevent memory leaks.
• It's a Seam plugin, so it's easy to use.
• It even works with SVGs!

Live example

There's a virtualized grid displaying 1,000,000 items showcased here

Installation

npm install data-binding-plugin

How to use

data-binding-plugin requires three things:

• 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 = new DataBinding();

Give it a model (an observable-store)

var Store = require("observable-store");
var store = new Store({
    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 = new Seam();

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.

<div data-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.

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

Of course, a template can have several bindings:

<div data-bind="bind: className, gender">
    <span data-bind="bind: innerText, name"></span>
    <span data-bind="bind: innerText, email"></span>
</div>

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

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

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

var dataBinding = new DataBinding(model, {
    formatDate: function (date) {
        // this is the dom element
        this.innerHTML = formatDate(date);
    }
});

Several parameters can be given to the formatter:

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

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

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

<ul data-bind="foreach">
    <li>
        <span data-bind="bind: innerText, firstname"></span>
        <span data-bind="bind: innerText, lastname"></span>
    </li>
</ul>

With an array-based observable-store:

var store = new Store([{
    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:

<ul data-bind="foreach: list, 0, 10">
    <li>
        <span data-bind="bind: innerText, firstname"></span>
        <span data-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:

var itemRenderer = dataBinding.getItemRenderer('list');
// start from index 10
itemRenderer.setStart(10);
// display 20 items instead of 10
itemRenderer.setNb(20);
// rerender the items
itemRenderer.render();

CHANGELOG

0.0.6 - 13 SEP 2015

• Update all dependencies to latest version
• Update all dev dependencies
• Fix license field in package.json

LICENSE

MIT