Sparky

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.

labs.cruncher.ch/sparky/

Latest build 2.2.1

• 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)

Getting started

Clone the repo:

git clone git@github.com/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

API

Sparky(selector)

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.