HTML5, CSS3 & JS Experiments

(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', '
{{month}} {{day}} {{year}}
');

    // 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', '{{testValue}} {{anotherTestValue}}', function() {
        window.console.log( window.templates.compile("test-2", {testValue: "Some value", anotherTestValue: "Another test value"}) );
    });

    // compile and render 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");
})();

/*
 * 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": '
{{items}}
',
            "list-item": '
{{contents}}
',
            "names": 'first name: {{firstName}}last name: {{lastName}}'
        },
        
        /*
         * @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;
})();