My Solution For HTML Templating

I am a big fan of separating application logic from presentation as much as possible. JavaScript naturally tends to blur the lines between these two areas which makes it extremely easy to just throw them both into a giant interface mixing pot. This method proves to be extremely inefficient when you are building applications that require maintenance by individuals who are not expected to know a bit of JavaScript. I have landed on a happy medium for several of my recent projects. I would like to share that process and inquire as to how you may handle this.

The Problem

We will start with a page that has sent an XHR request to the server, a search perhaps. This search may return ten to several hundred results. You could simply have the server return a giant chunk of HTML containing your full search results. The JavaScript then needs to only append the results to the appropriate place on the document. That would be the easy way out. HTML adds a bunch of unimportant pieces of data to the stream that our browser is handling.

Simple Solution

To help our browser while it chokes down the data we can instead request a JSON object from our server. Several hundred results may still be large, but we’ve likely cut our total size down by a significant value. This leaves us with the problem of displaying this information. Each record has the same display properties, just different values. We could just loop over each object in our code and use a replace command on a pre-determined string to populate our data correctly. This is how it might look in vanilla JavaScript:

var htmlSnip = "<p>Your name is: {name}, Your Position is: {title}</p>";
	var content = '';
	for (var x=0; x<mydata.length; x++){
		tmp = htmlSnip.replace('{name}', mydata[x].firstName);
		tmp = tmp.replace('{title}', mydata[x].title);
		content += tmp;
	}
	document.getElementById('wrapper').innerHTML = content;

Loop over each record in our data set and replace our predetermined variables with information from the data. In this example I have used {name} and {title} to create a variables for replacing later.

This scenario however is less than ideal if we are working with a team that may have minimal or no JavaScript knowledge. The site may have rolled to production months ago and is now handled by a new HTML developer. It would be ideal if we can move our HTML out of the JavaScript entirely. If we move it to the body of the HTML document it will reside in the same place as the rest of the presentation. Here is a sample:

	<div id="template" style="display: none;">
		<p>Your name is: {name}, Your Position is: {title}</p>
	</div>

The template now sits in the HTML document, removed completely from our JavaScript logic.

var htmlSnip = "<p>Your name is: {name}, Your Position is: {title}</p>";

becomes:

	var htmlSnip = document.getElementById(‘template’).innerHTML;

A YUI3 Version Using Substitute

It’s possible that we will need to re-use this code. For that, I have called in the help of YUI3. Converting the JavaScript above to YUI3 yields the following:

var content = '';
	var htmlSnip = Y.one('#template').get('innerHTML');
	Y.each(mydata, function(person){
		content += 	Y.substitute( htmlSnip, {
			name: person.firstName,
			title: person.title
		});
	});
	Y.one('#wrapper').set('innerHTML', content);

If you are processing a lot of templates you could turn this into an object and simply call:

			
var myTemplate = new Y.fastTemplate({
data: mydata,
		templateNode: Y.one('#template'),
		wrapperNode: Y.one('#wrapper')
	});

myTemplate.process();

The base object for that looks like this:

YUI.add('fastTemplate', function(Y) {
		function fastTemplate( config) 
		{
	 		fastTemplate.superclass.constructor.apply( this, arguments );
		}
		
		fastTemplate.NAME = "fastTemplate";
		
		fastTemplate.ATTRS = {
			data : {},
			variables: {},
			templateNode: {},
			wrapperNode: {}
		};
		
		Y.extend( fastTemplate, Y.Base, {
			process : function() {
				var content = '';
				var myData = this.get('data');
				var htmlSnip = this.get('templateNode').get('innerHTML');
				Y.each(myData, function(i){
					content += Y.substitute( htmlSnip, i);
				}, this);
				this.get('wrapperNode').set('innerHTML', content);
			}
		});
		
		Y.fastTemplate = fastTemplate;
}, '0.0.1' ,{requires:[ 'node', 'base', 'substitute']});

View a sample of the base object in action.

On GitHub

In Closing

I’m curious what other people are using out there. I’d like to know if you have any suggestions or updates to what I have here.

Add a comment:

• Your Name
• Your website
• Body
• What animal says "Moo"?

Submit