JavaScript template engine in 2kb

Usage & examples

First of all lets define an example object.


data = {
    title: 'World'
}

Now we need to display it in one or more places:


<h3>Hello {{ data.title }}! </h3>

Hello {{ data.title }}!


Run example

Now lets make another, more complex example, using new variables:


var node1 = document.querySelector('input#first-name');
var node2 = document.querySelector('input#last-name');

user = {
    firstName: function(){ return node1.value; },
    lastName: function(){ return node2.value; }
}


<input type="text" id="first-name">
<input type="text" id="last-name">


Your name is {{ user.firstName }} {{ user.lastName }}!




How to use it

Basicaly it provides a simple API for developing a template language.

First you must define a variable:


user = {
    firstName: 'Some Name',
    lastName: function(){
        return document.querySelector('input#last-name').value;
        /* You can also pass a function. */
    }
}

Than you display it in your html whenever you want.


My name is: {{user.firstName}}

After this you must activate the parser by selecting the root element:


TemplateEngine.run(document.getElementById('wrapper'));

If you want to change the variable you must update the html via:


TemplateEngine.reRendVariable('user.firstName');

DOWNLOAD