Skip to content
ultralight javascript templating framework
Smarty JavaScript HTML
Find file
Latest commit 9c12a5e @psychobunny 0.3.3
Failed to load latest commit information.
lib replace all ../ in getBlock
tests trying to repro NodeBB/NodeBB#4061
.gitattributes init
.gitignore bench remote & grunt watch
.travis.yml only doing CI for 0.10
Gruntfile.js local
LICENSE updated copyright info
README.md Another typo
index.js published to npm
package.json 0.3.3

README.md

templates.js

Build Status Code Climate Dependency Status

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

Installation

npm install templates.js

Testing

npm install
npm test

Projects using templates.js

NodeBB

Add yours here by submitting a PR :)

Something went wrong with that request. Please try again.