muralikrishnat / lite-te Goto Github PK

View Code? Open in Web Editor NEW

A simple light weight(2kb) template engine which can be used either in node environment or node-less environment.

License: MIT License

JavaScript 93.94% HTML 6.06%

lite-te's Introduction

Lite-TE is a simple light weight template engine.

Usage

install lite-te using npm npm install lite-te --save
import lite-te as var liteTE = require('lite-te');
pass your html to compile function of liteTE as var template = liteTE.compile(your-html-string);
the template variable now consists of bindContext function which binds your javascript object to the html. var html = template.bindContext(your-object);

Example

For node environment

var liteTE = require('lite-te');
var tempalte = liteTE.compile('<p>{{ this.profile.name }}</p><p>{{ this.profile.age }}</p>');
var html = template.bindContext({ 
    profile: {
        name: 'Hello World',
        age: '100 years'
    }
});
document.querySelector('body').innerHTML = html;

For plain javascript

download the index.js file from https://github.com/KiranMantha/lite-te to the local source code folder.
refer the downloaded file in the html page.
access the liteTE object from window object as window.liteTE.

Example

var template = liteTE.compile('<p>{{ this.profile.name }}</p><p>{{ this.profile.age }}</p>');
var html = template.bindContext({ 
    profile: {
        name: 'Hello World',
        age: '100 years'
    }
});
document.querySelector('body').innerHTML = html;

Complex Example

in HTML

<script id="sampleTpl" type="text/lite-te">
    <div>
        <p>{{ this.name }}</p>
        <p>{{ this.age }}</p>
        <ul>
            for(var i=0; i < this.skills.length; i++) {
                <li>{{ this.skills[i] }}</li>
            }
        </ul>
    </div>
</script>

in JS

var tpl = document.getElementById('sampleTpl').innerHTML;
var template = liteTE.compile(tpl);
var html = template.bindContext({ 
    name: 'Hello World!!',
    age: 25,
    skills: ['html', 'css', 'javascript']
});
document.querySelector('div').innerHTML = html;

Note: In the above example we're not using require as we're not using node environment.

Recommend Projects