Just Talk About Web

Techniques Behind Modern Web

Tutorials




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:

<table id="templ" class="books" border="0">
<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):

var directive = {
	'tbody tr':  'book &lt;- 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:

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?

var directive = {
	'tbody tr':  'book &lt;- 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.


Free Website Magazine: Know more than your competitors with Website Magazine

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

  • 12 Comments
  • Filed under: Tutorials, Web 2.0
  • CSS Web 2.0 Glossy Text

    Well, you don’t need to be a Photoshop pro to create glossy text that seems very trendy today (Web 2.0 styles? hmm).

    css gradient effect

    Here is a simple CSS trick to show you how to create gradient text effect with a PNG image (pure CSS, no Javascript or Flash). Just put an empty <span> tag in the heading and apply the background image overlay using the CSS position:absolute property. This trick works on most browsers: Firefox, Safari, Opera,… Read more »

  • 20 Comments
  • Filed under: CSS, Tutorials, Web 2.0
  • Top SEO Tips for WordPress Blog

    I just want to share the best SEO tips (among a lot of other recommended tips) that work very well for my WordPress blog.

    1. Permalinks

    Change your WordPress permalinks to be search-engine friendly. To change the default link type, go to Options -> Permalinks.

    Wordpress permalinks

    Select the more search-engine-friendly option:

    SEO permalink option for WordPress

    Please read a very comprehensive article about WordPress permalinks from Web Tool Collections.

    2. Create a Sitemap

    A sitemap is… Read more »

  • 33 Comments
  • Filed under: Tutorials, Web 2.0
  • Rails 2.0 reveals many changes and improvements, but the biggest change involves getting closer to the full web-orientation of REST and HTTP. With a few lines of codes now you can easily create open web applications based on modern web service.

    Creating Rails application

    This example is a deadly-simple bookstore CMS. All you can do are to get book list, add or delete books. Not much? Yes, but big news is you can do that from anywhere… Read more »

    Premium Sponsors

    Website Magazine

    Career Opportunities

    Advertisements