indie-set-core

Set is an unobtrusive and DRY template engine for Node.js and browsers. This package contains the rendering engine for Set.

Get started

To run the demo:

./dev

Visit http://localhost:8000 to see a simple demo.

Compilation

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

Installation

Browser

Script tags

Get the set.js file and add your script tags like you always do:

<script src="/static/set.js"></script>

Browserify

Install the module via NPM using:

npm install --save indie-set-core

And use it in your code:

var set = require('indie-set-core')

AMD

Set also supports AMD:

define('myModule', ['set'], function (set) {
  // Write some code here
});

Node.js

Install the module via NPM using:

npm install --save indie-set-core

And use it in your code:

var set = require('indie-set-core')

Use

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>
*/

Credits

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.