The idea of utilizing any part of your HTML document as template to render data purely with JavaScript and CSS has been realized with Pure library.

Pure Lib Home

While nothing to prevent you from using server-side template engine like Smarty, it does not help much if your application is heavily ajaxified and many parts of the app are built after the “onload” event with data pulled behind screen. For example, a list of players is to be rendered just after user selects the team name. One (dirty) solution is to do everything from server side and assign pre-formatted HTML to DOM element like:

 
var preFormattedHTML = getHTMLByAjax(); // get pre-formatted HTML from server via Ajax
var el = document.getElementById(‘target’);
el.innerHTML = preFormattedHTML;
// ...

OK, this approach works (though strictly MVC-minded people may not like it) but you are putting unnecessary workload on server while this can be undertaken all from client-side.

“Pure” is not the first attempt to create a Javascript/HTML template engine, you can find some other solutions on the net which are in independent projects or as part of an Ajax framework. However, Pure looks like the most comprehensive, systematic and flexible way out.

Basically, to render data, you need a piece of HTML as template, a context which contains data to render, a directive to tell how to render and of course a target element. Please go through 4 examples on Pure’s website to see how to create simple to more complicated templates. I also got my hand dirty to create a slightly more advanced example that renders some recommended reading books when user selects a programming language from dropdown control.

Pure Advanced Example

First, just build a template table in pure HTML:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

<table class="books" id="templ">
	<thead>
		<tr>
			<th class="title">Title</th>
			<th class="publisher">Publisher</th>
			<th class="price">Price</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td class="title"> </td>
			<td class="publisher"> </td>
			<td class="price"> </td>
		</tr>
	</tbody>
</table>

Then write a directive to tell “Pure” how to format the result table from data (a list of books):

1
2
3
4
5
6

var directive = {
	'tbody tr':  'book <- list',
	'td.title': 'book[0]',
	'td.publisher':  'book[1]',
	'td.price':  'book[2]',
	'tbody tr[class]' : (function(context, items, pos) { return ( pos % 2 == 1 ) ? 'even' : 'odd'; })};

And a render function using JQuery:

1
2
3
4
5

function render(){
	$.getJSON('json.php', 'lang=' + $('#langList').val(), function(books){
		$('#target').html($('#templ').$pMap(directive).$pRender(books));
	});
}

As you may notice, data (in JSON) are dynamically retrieve based on a language selected via a JQuery Ajax function getJSON().

Finally, here are all 17 lines of JavaScript code used to get it done. Pretty simple, no?

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

var directive = {
	'tbody tr':  'book <- list',
	'td.title': 'book[0]',
	'td.publisher':  'book[1]',
	'td.price':  'book[2]',
	'tbody tr[class]' : (function(context, items, pos) { return ( pos % 2 == 1 ) ? 'even' : 'odd'; })};
 
function render(){
	$.getJSON('json.php', 'lang=' + $('#langList').val(), function(books){
		$('#target').html($('#templ').$pMap(directive).$pRender(books));
	});
}
 
$(document).ready(function(){
	render();
	$('#langList').change(render);
});

Please see online example and download source codes below.


Recommended Reading: This site recommends Website Magazine for 'Net Success

Don't forget to subscribe so you don't miss out on future posts!

Share and Enjoy:

These icons link to social bookmarking sites where readers can share and discover new web pages.
  • Digg
  • StumbleUpon
  • DZone
  • del.icio.us
  • Reddit
  • Mixx
  • Technorati
  • Sphinn
  • Facebook
  • Google
  • SphereIt
  • BlinkList
  • Furl
  • Ma.gnolia
  • Slashdot
  • Spurl
  • TailRank
  • TwitThis

Related Posts