Sparky is a live data binding templating engine that enhances the DOM with declarative tags and composeable templates, updating tags and rendering changes in batches at the browser frame rate for performance.
- http://labs.cruncher.ch/sparky/dist/sparky.js (~120k/60k gzipped, includes dependencies)
- http://labs.cruncher.ch/sparky/dist/sparky.min.js (~90k/30k gzipped, includes dependencies)
Clone the repo:
git clone [email protected]/cruncher/sparky.git
cd sparky/
git submodule update --init
Install node modules:
npm install
Build dist/sparky.js:
npm run build-nodeps // Omit dependencies
npm run build // Include dependencies
Sparky takes this:
<div data-fn="find:'data'" class="user {[.|yesno:'active']}">
<a class="thumb" style="background-image: url('{[avatar]}')">{[name]}</a>
</div>
window.data = {
avatar: '/username/avatar.png',
name: 'Godfrey'
};
Sparky('.user');
And renders this:
<div data-fn="scope:'data'" class="user active">
<a class="thumb" style="background-image: url('/username/avatar.png')">Godfrey</a>
</div>
The Sparky constructor takes a DOM fragment or a DOM node or a selector.
var fragment = document.createDocumentFragment();
Sparky(fragment);
var node = document.querySelector('.user');
Sparky(node);
Sparky('.user');
And an optional second argument, scope.
Sparky('.user', {
avatar: '/username/avatar.png',
name: 'Godfrey'
});
A sparky object is a pushable stream of data objects that are mapped through
functions declared in the sparky-fn attribute and then rendered to tags.