Security News
New axobject-query Maintainer Faces Backlash Over Controversial Decision to Support Legacy Node.js Versions
A JavaScript library maintainer is under fire after merging a controversial PR to support legacy versions of Node.js.
data-binding-plugin
Advanced tools
Readme
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:
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();
MIT
FAQs
One of the most powerful two way data-binding tool with virtualization. Highly optimized for performance and memory
The npm package data-binding-plugin receives a total of 0 weekly downloads. As such, data-binding-plugin popularity was classified as not popular.
We found that data-binding-plugin demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
A JavaScript library maintainer is under fire after merging a controversial PR to support legacy versions of Node.js.
Security News
Results from the 2023 State of JavaScript Survey highlight key trends, including Vite's dominance, rising TypeScript adoption, and the enduring popularity of React. Discover more insights on developer preferences and technology usage.
Security News
The US Justice Department has penalized two consulting firms $11.3 million for failing to meet cybersecurity requirements on federally funded projects, emphasizing strict enforcement to protect sensitive government data.