/ SOFTWARE, JAVASCRIPT, WEB

Javascript Templating

Way back in 2008 I was really getting into JavaScript development and created a small templating object.

The basic idea is to keep view code all in the same location. In this case the view is a html page. JavaScript will update the view. Any new elements on the page should be defined on the page in a hidden template. Notice the naming convention using -t for templates.

<table class="employees">
  <tr><td>Name</td><td>Location</td></tr>
  <tr><td>John</td><td>Phoenix, AZ</td></tr>
  <tr><td>Bill</td><td>Tempe, AZ</td></tr>
</table>

<div class="hidden employee-t">
  <tr><td>{name}</td><td>{location}</td></tr>
</div>

The JavaScript code will add a new employee to the employees list.

// Get the template from the hidden div
var newRowTemplate = $(".employee-t").html();

// Create a new template using the html for the pattern
var newRow = new helios.template(newRowTemplate);

// Fetch employee data. Returns
// {employees : [
//   {"name":"Jim","location","San Jose, CA"},
//   {"name":"Sara","location","L.A., CA"} ]}
var items = ajax.get("/employee/ca")

var len = items.length;
for (var i=0; i<len; i++)
{
  var item = items[i];

  // Evaluate the JSON object into the template
  var text = newRow.evaluate(item);

  // Add the new element to the page
  $(.employees).append(text);
}

JavaScript Template

Here is the very simple template to get the job done. Nothing special here.

/****************************************************************************/
/// <summary>
/// An object that uses an html template and data to produce merged html.
/// </summary>
helios.template = function(text){
    this._pattern = $.trim(text);
}

helios.template.prototype = {
    evaluate : function(data){
        var s = this._pattern;

        // Cycle each property name
        $.each(data, function(i){
            // Replace Named Placeholder with property value
            var re = new RegExp("{" + i + "}","g");
            s = s.replace(re, data[i] );
            //s = s.split(re).join(data[i]);
        });

        // Replace the data found in the template.
        return s;
    }
}