#jsVelocity - A JavaScript Template Engine of Velocity
You can use velocity.js rendering stuff in various scenarios. E.g. you can render templates in your browser.
A quick example how to use velocity.js:
Template.define('t1', [
'#set(${name}="vapour")',
'#if(${name})',
'<div>${name}</div>',
'#end',
'<ul>',
'#foreach(${web} in ${website})',
'<li>${web.name} : ${web.url}</li>',
'#end',
'</ul>'
]);
var html = Template.render('t1', {
website: [{
name: 'google',
url: 'http://www.google.com/'
}, {
name: 'yahoo',
url: 'http://www.yahoo.com/'
}, {
name: 'facebook',
url: 'http://www.facebook.com/'
}, {
name: 'twitter',
url: 'http://www.twitter.com/'
}]
});
variables are always surrounded by curly brace like this ${name}.
Template.define('t1', [
'<div>${name}</div>',
'<div>${web}</div>'
]);
var html = Template.render('t1', {
name: 'vapour',
web: 'http://www.dovapour.info/'
});
to assign a value to a variable
Template.define('t1', [
'#set(${name}="vapour")',
'<div>${name}</div>',
'<div>${web}</div>'
]);
var html = Template.render('t1', {
web: 'http://www.dovapour.info/'
});
Conditional expression begin with #if and end with
#end. When condition evaluates to true, the true section is rendered,
otherwise the false section will output.
Template.define('t1', [
'#set(${name}="vapour")',
'#if(${name})',
'<div>${name}</div>',
'#else',
'<div>${web}</div>',
'#end'
]);
var html = Template.render('t1', {
web: 'http://www.dovapour.info/'
});
Template.define('t1', [
'<ul>',
'#foreach(${web} in ${website})',
'<li>${velocityCount} ${web.name} : ${web.url} #macro(isGoogle ${web.name})</li>',
'#end',
'</ul>'
]);
var html = Template.render('t1', {
website: [{
name: 'google',
url: 'http://www.google.com/'
}, {
name: 'yahoo',
url: 'http://www.yahoo.com/'
}, {
name: 'facebook',
url: 'http://www.facebook.com/'
}, {
name: 'twitter',
url: 'http://www.twitter.com/'
}],
isGoogle: function(name){
return name === 'google' ? ', is google' : '';
}
});