One of the most powerful two way data-binding tool with virtualization. Highly optimized for performance and memory
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!
There's a virtualized grid displaying 1,000,000 items showcased here
npm install data-binding-plugin
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
var DataBinding = require"data-binding-plugin";
The data-binding plugin binds the data from a model with an HTML view.
var dataBinding = ;
Give it a model (an observable-store)
var Store = require"observable-store";var store =name: "data-binding";
Give the store to the data-binding plugin:
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 = ;seamadd"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.
And apply the data-binding plugin to the view.
When the store is updated, the view will reflect the change:
The data-binding plugin can update any property. This will update the className, which in turn sets the class attribute of the div element.
Of course, a template can have several bindings:
We can also have formatter. Instead of giving a className, we can specify a formatter function:
And when initializing the plugin, we add it a list of formatters:
var dataBinding = model// this is the dom elementthisinnerHTML = formatDatedate;;
Several parameters can be given to the formatter:
Data-binding plugin can also repeat a template if the model is an array:
With an array-based observable-store:
var 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:
var itemRenderer = dataBindinggetItemRenderer'list';// start from index 10itemRenderersetStart10;// display 20 items instead of 10itemRenderersetNb20;// rerender the itemsitemRendererrender;