A model-agnostic live data binding template layer for the DOM.
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
axios @ 0b3db5d
components/sparky-template
css
dist
images
libs
modules
performance
plugins
polyfills
test
.eslintrc.json
.gitignore
.gitmodules
LICENSE
README.md
config.js
countries.json
example.json
go.html
index.html
json.html
karma.conf.js
package-lock.json
package.json
sparky.js
template.html
test-select.html
test-template.html
test.html

README.md

"build": "npm run build-nodeps && cat fn/js/fn.js fn/js/observable.js fn/js/stream.js fn/js/stream.observe.js fn/js/time.js dom/polyfills/customevent.js dom/polyfills/document.scrollingelement.js dom/js/dom.js dist/sparky-nodeps.js > dist/sparky.js && minify dist/sparky.js && cat dom/css/dom.css css/sparky.css > dist/sparky.css",

Sparky

alt tag

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

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.