Templating with nothing but javascript objects and HTML.
npm install fillThis project is under heavy development, and the API has not solidfied yet.
Don't use this for anything important...yet.
Bind data to DOM with zero configuration. Just call .fill(data).
``html``js`
$('#template').fill({
project: 'Fill',
details: {
githubLink: { _text: 'Fill', _href: 'https://github.com/profit-strategies/fill' },
features: {
_style: 'color:green'
li: [
'Uses plain HTML with no extra templating markup',
'Runs on the client or server (with jsdom)',
'Render arrays without loops or partials',
'Nested objects and collections',
'Compatible (tested on IE6+, Chrome and Firefox)',
]
}
});`html`
Fill
Fill
Install with npm install fill or get the
compiled and minified version
and include it to your application. jQuery is optional, but if you happen to
use it, fill registers itself as a plugin.
`html`
For server-side use, see spec folder and the awesome
jsdom for the details.
fill binds JavaScript objects to DOM a element by id, class,element name,name attribute and data-bind attribute. Values are escaped before rendering.
Any keys that are prefixed with an underscore are treated as attributes (with
the exception of _text and _html).
Template:
`html`
Javascript:
`js
var hello = {
_class: 'message',
hello: 'Hello',
goodbye: 'Goodbye!',
span: 'See Ya!',
greeting: 'Howdy!',
'hi-label': 'Terve!' // Finnish i18n
};
// with jQuery
$('#container').fill(hello);
// ..or without
fill(document.getElementById('container'), hello);
`
Result:
`html`
Template:
`html`
Javascript:
`js
var activities = {
activity: [
'Jogging',
'Gym',
'Sky Diving'
]
};
$('#activities').fill(activities);
// or
fill(document.getElementById('activities'), activities);
`
Result:
`html`
#### Iterating over a list, using a css class to select the target
Template:
`html`
Javascript:
`js
var comments = [
{body: "That rules"},
{body: "Great post!"}
]
$('.comment').fill(comments);
`
Result:
`html`
That rules
Great post!
Template:
`html`
Javascript:
`js
var post = {
title: 'Hello World',
post: 'Hi there it is me',
comment: [ {
name: 'John',
text: 'That rules'
}, {
name: 'Arnold',
text: 'Great post!'
}
]
};
$('.container').fill(post);
`
Result:
` Hi there it is mehtml`
Hello World
John
That rules
Arnold
Great post!
Template:
`html`
Javascript:
`js
var person = {
firstname: 'John',
lastname: 'Wayne',
address: {
street: '4th Street',
city: 'San Francisco',
zip: '94199'
}
};
$('.person').fill(person);
`
Result:
`html`
John
Wayne
4th Street
94199San Francisco
Template:
`html`
Javascript:
`js
// prefix with a dollar sign to find all matches
// otherwise it will only find the first one
var post = {
$hello: 'hi'
};
$('.container').fill(post);
`
Result:
`html``
hi
hi
hi
You need node.js 0.6.x and npm.
Install dependencies:
npm install
npm install -g uglify-js
Run tests
npm test
Run tests during development for more verbose assertion output
node_modules/jasmine-node/bin/jasmine-node --verbose spec
Generate Javascript libs
node build
All the following are appreciated, in an asceding order of preference
1. A feature request or a bug report
2. Pull request with a failing unit test
3. Pull request with unit tests and corresponding implementation
In case the contribution is going to change fill API, please create a ticket first in order to discuss and
agree on design.
This project was forked from the very impressive
Transparency project
to attempt the following:
* allow the setting of attributes (without needing to use directives)
* eventually phasing out directives completely
* add support for manipulating strings of HTML (without jsdom)
* for superfast rendering of html on server (running node.js)
* Transparency.js
* from which this project was spawned
* Plates.js
* successor of Weld.js