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:
There's a virtualized grid displaying 1,000,000 items showcased here
npm install data-binding-plugin
data-binding-plugin requires three things:
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;