Set is an unobtrusive and DRY template engine for Node.js and browsers. This package contains the rendering engine for Set.
To run the demo:
./dev
Visit http://localhost:8000 to see a simple demo.
Even if the JavaScript file is included in the repo, the development is done in CoffeeScript and compiled to JavaScript. To compile run:
coffee -c set.coffee
If you don't have CoffeeScript installed, install it with:
sudo npm install -g coffee-script
Get the set.js
file and add your script tags like you always do:
<script src="/static/set.js"></script>
Install the module via NPM using:
npm install --save indie-set-core
And use it in your code:
var set = require('indie-set-core')
Set also supports AMD:
define('myModule', ['set'], function (set) {
// Write some code here
});
Install the module via NPM using:
npm install --save indie-set-core
And use it in your code:
var set = require('indie-set-core')
Regardless the method used to import Set, you'll get a set
function which
receives a DOM element and data. Data is used to render the DOM element.
NOTE: If used in Node.js a DOM implementation is needed. (See https://ind.ie/labs/set)
var div = document.createElement("div");
document.body.appendChild(div);
template = "\
<ul>\
<li data-set-repeat='person people'>\
<a data-set-attribute='href person.homepage'>\
<p>\
Hello, my name is <span data-set-text='person.name'>Inigo Montoya</span>\
<span data-set-if='person.isSpeaker'>Speaker</span>\
</p>\
</a>\
</li>\
</ul>"
data = {
people: [
{ name: 'Aral', homepage: 'https://aralbalkan.com', isSpeaker: 'yes' }
, { name: 'Laura', homepage: 'http://laurakalbag.com' , isSpeaker: 'yes' }
, { name: 'Jo', homepage: 'http://www.jo-porter.com', isSpeaker: 'yes' }
, { name: 'Osky', homepage: 'http://twitter.com/gigapup' }
]
}
div.innerHTML = template;
set(div, data);
/* Puts this in the body:
<div>
<ul>
<li data-set-repeat="person people">
<a data-set-attribute="href person.homepage" href="https://aralbalkan.com"></a>
<p>Hello, my name is <span data-set-text="person.name">Aral</span>
<span data-set-if="person.isSpeaker">Speaker</span></p>
</li>
<li data-set-alias="person people 1" data-set-dummy="1">
<a data-set-attribute="href person.homepage" href="http://laurakalbag.com"></a>
<p>Hello, my name is <span data-set-text="person.name">Laura</span>
<span data-set-if="person.isSpeaker">Speaker</span></p>
</li>
<li data-set-alias="person people 2" data-set-dummy="1">
<a data-set-attribute="href person.homepage" href="http://www.jo-porter.com"></a>
<p>Hello, my name is <span data-set-text="person.name">Jo</span>
<span data-set-if="person.isSpeaker">Speaker</span></p>
</li>
<li data-set-alias="person people 3" data-set-dummy="1">
<a data-set-attribute="href person.homepage" href=
"http://twitter.com/gigapup"></a>
<p>Hello, my name is <span data-set-text="person.name">Osky</span>
<span data-set-if="person.isSpeaker" style="display: none;">Speaker</span></p>
</li>
</ul>
</div>
*/
Set extends the excellent Distal template engine which is an implementation of the Template Attribute Language (TAL) concept from Zope.
Copyright © Aral Balkan. Released with ♥ by Ind.ie under the MIT License. Portions released under the Apache License.