Templates.js NPM

templates.js is an ultralight (1.72kb minified and gzipped) and super fast templating framework for JavaScript and node.js.

It has express support out-of-the-box.

API

Parse templates by passing in a template string and an object representing the data to be parsed.

var parsed = templates.parse(template, data);

templates.js client-side

<html>
<head>
	<script type="text/javascript" src="path/to/templates.js"></script>
</head>
<body>
	<div id="template">
		<p>{quote.text}</p>
		<strong>{quote.author}</strong>
	</div>

	<script type="text/javascript">
		var el = document.getElementById('template');

		el.innerHTML = templates.parse(el.innerHTML, {
			quote: {
				text: "Life is really simple, but we insist on making it complicated.",
				author: "Confucius"
			}
		});
	</script>
</body>
</html>

templates.js and express

var express = require('express'),
	app = express(),
	templates = require('templates.js'),
	data = {};

app.configure(function() {
	app.engine('tpl', templates.__express);
	app.set('view engine', 'tpl');
	app.set('views', 'path/to/templates');
});

app.render('myview', data, function(err, html) {
	console.log(html);
});

app.get('/myview', function(res, req, next) {
	res.render('myview', data);
});

Template Syntax

Sample data, see test cases for more:

{
	"animals": [
		{
			"name": "Cat",
			"species": "Felis silvestris catus",
			"isHuman": false,
		},
		{
			"name": "Dog",
			"species": "Canis lupus familiaris",
			"isHuman": false,
		},
		{
			"name": "Human",
			"species": "Homo sapiens",
			"isHuman": true
		}
	],
	"package": {
		"name": "templates.js",
		"author": "psychobunny",
		"url": "http://www.github.com/psychobunny/templates.js"
	},
	"website": "http://burnaftercompiling.com",
	"sayHello": true
}

Simple key/value

My blog URL is {website}. The URL for this library is {package.url}

Conditionals

<!-- IF sayHello -->
  Hello world!
<!-- ENDIF sayHello -->

<!-- IF !somethingFalse -->
  somethingFalse doesn't exist
<!-- ENDIF !somethingFalse -->

Arrays

Repeat blocks of HTML with an array. The two helpers @first and @last are also available as conditionals within an array.

<!-- BEGIN animals -->
  {animals.name} is from the species {animals.species}.
  <!-- IF !animals.isHuman -->
    - This could be a pet.
  <!-- ENDIF !animals.isHuman -->
<!-- END animals -->

prints out:

Cat is from the species Felis silvestris catus.
- This could be a pet.
Dog is from the Canis lupus familiaris.
- This could be a pet.
Human is from the species Homo sapiens.

Helpers

Helpers are JavaScript methods for advanced logic in templates. This example shows a really simple example of a function called print_is_human which will render text depending on the current block's data.

templates.registerHelper('print_is_human', function(data, iterator, numblocks) {
	return (data.isHuman) ? "Is human" : "Isn't human";
});

<!-- BEGIN animals -->
{function.print_is_human}
<!-- END animals -->

prints out:

Isn't human
Isn't human
Is human