JavaScript HTML Template Engine

Here’s a quick, dirty, reliable and library-independent client-side HTML template engine with support for prefetched templates (in a JavaScript object) and a few handy and extensible methods for compiling, adding and removing templates. Please, check the documentation in the source code and the examples at the bottom of this page for usage and more insight. You can also download the example from this link. Or you can check the demo first.

The Renderer JavaScript Class

/*
 * Renderer
 * HTML Template Engine
 * developer's website: http://wemakesites.net/#!/web-dev
 * developer's twitter: https://twitter.com/#!/wemakesitesnet
 * developer's blog http://acidmartin.wordpress.com/
 **/

(function() {
    "use strict";

    /*
     * @namespace window.AcidJs
     **/
    if(undefined === window.AcidJs) {
        window.AcidJs = {};
    }

    /*
     * @class Renderer
     * @constructor
     **/
    function Renderer() {}

    Renderer.prototype = {
        /*
         * @member TEMPLATES
         * @public
         * @info key/value storage of templates that will be used
         **/
        TEMPLATES: {
            "list": '<ul>{{items}}</ul>',
            "list-item": '<li>{{contents}}</li>',
            "names": '<span>first name: {{firstName}}</span><span>last name: {{lastName}}</span>'
        },

        /*
         * @method compile
         * @public
         * @param name (String) name of the template that will be used
         * @param data (Object) key/value pairs of template placeholders and values that should be replaced against these placeholders
         **/
        compile: function(name, data) {
            var
                html = this.TEMPLATES[name] || "";

            data = data || {};

            for (var key in data) {
                if (data.hasOwnProperty(key)) {
                    var
                        value = data[key],
                        regexp = new RegExp("{{" + key + "}}", "g");

                    html = html.replace(regexp, value);
                }
            }

            return html;
        },

        /*
         * @method add
         * @public
         * @param name (String)
         * @param html (String)
         * @param callback (Function) [optional]
         **/
        add: function(name, html, callback) {
            if(name && html) {
                this.TEMPLATES[name] = html;
                if(callback) {
                    callback.call(this);
                }
            }
        },

        /*
         * @method remove
         * @public
         * @param name (String)
         **/
        remove: function(name) {
            if(this.TEMPLATES[name]) {
                delete this.TEMPLATES[name];
            }
        }
    };

    window.AcidJs.Renderer = Renderer;
})();

Use Cases and Examples

(function() {
    // initialize Renderer
    window.templates = new AcidJs.Renderer();

    // compile and render some test template
    window.console.log(window.templates.compile("names", {firstName: "Martin", lastName: "Ivanov"}));

    // add template on the fly
    window.templates.add('date', '<div>{{month}} {{day}} {{year}}</div>');

    // compile and render the newly added template
    window.console.log(window.templates.compile("date", {day: 21, month: "June", year: 1976}));

    // add template on the fly and compile it immediately (callback is optional)
    window.templates.add('test-2', '<span><em>{{testValue}}</em> <strong>{{anotherTestValue}}</strong></span>', function() {
        window.console.log( window.templates.compile("test-2", {testValue: "Some value", anotherTestValue: "Another test value"}) );
    });

    // compile and render templates contents as function
    window.console.log(window.templates.compile("list", {items: function() {
            var
                guitars = ["B.C. Rich", "Jackson", "ESP", "Ibanez", "Gibson", "Fender"],
                html = [];

            for(var i = 0, len = guitars.length; i < len; i++) {
                var
                    guitar = guitars[i];

                html.push(window.templates.compile("list-item", {contents: guitar}));
            }

            html = html.join("");

            return html;
    }}));

    // remove the test template
    window.templates.remove("names");
})();

Supported Browsers

• Mozilla Firefox
• Google Chrome
• Apple Safari
• Opera
• Internet Explorer 6-10

Please, follow @wemakesitesnet or check my website for more cool stuff. If you like this piece of code, you can also download it.

Related Posts

• HTML5 Shopping Cart
• JavaScript Mapper Class for RESTFul Methods
• State-of-the-art Ribbonbar Component
• Progressbar Component
• XML to JSON JavaScript Objectifier Class
• URI to JSON Serializer Class
• IMDB Fetcher – Experimental IMDB JavaScript and PHP API
• Quick and Dirty Localization With JavaScript
• JavaScript Instance Name Finder
• HTML5 Placeholder Enabler
• HTML 5 Details Element Enabler
• WebWorkers JavaScript class.
• Classless JavaScript inheritance.
• JavaScript class augmenter.
• JavaScript API for TinyURL.
• HTML Validation Bookmarklet.

About these ads