Lite-TE is a simple light weight template engine.
- 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 ofbindContext
function which binds your javascript object to the html.var html = template.bindContext(your-object);
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;
- 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 fromwindow
object aswindow.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;
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.