About hogan.js

Hogan.js is a JavaScript templating engine for Mustache templates.html

Hogan is a JavaScript library that parses and compiles Mustache templates. It can run in both the web browser and other JavaScript engines such as Node.js and Rhino.git

Example usage

Hogan uses standard mustache templates:github

<script type="text/html" id="topUsersTemplate">
    <h1>{{title}}</h1>
    <ul>
        {{#users}}
            <li>{{name}} ({{postCount}})</li>
        {{/users}}
    </ul>
</script>

These can then be compiled on the client:web

var template = Hogan.compile(document.getElementById("topUsersTemplate").innerHTML);

Or pre-compiled on the server and delivered as pure JavaScript code, which can just be included with a script tag. This is preferable as compilation is the most expensive operation:post

<script src="/js/topUsersTemplate.js"></script>

The template is then rendered with a context object which contains the fields to expand the template.spa

var context = {
    "title": "Top Users",
    "users": [
        {
            "name": "User 1",
            "postCount": 2000
        },
        {
            "name": "User 2",
            "postCount": 1900
        },
        {
            "name": "User 3",
            "postCount": 1800
        }
    ]
};

document.body.innerHTML = template.render(context);

The preceding code would produce:code

<h1>Top Users</h1>
<ul>
    <li>User 1 (2000)</li>
    <li>User 2 (1900)</li>
    <li>User 3 (1800)</li>
</ul>