HTML5, CSS3 & JS Experiments

By Martin Ivanov

Simple Template Engine

Open your browser's console and reload the page to see the code in action.

Usage and Code Insight

(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; })();