Web 2.0

Pages (3): 1 2 3 »

JavaScript - HTML Template Engine: Pure

Author: Jimmy

8 Aug

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.

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.

First, just build a template table in pure HTML:

<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):

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:

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 <- 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.

Sponsored by Free Website Trade Publication >> Website Magazine

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.

4 Comments

Filed under: Tutorials, Web 2.0

Delicious 2.0 & What Disappointed About

Author: Jimmy

1 Aug

I use this online bookmaking service quite often since it started in the good old days when all internet startups were welcome warmly and had somewhat weird names like Flickr, Digg and of course the "Del.icio.us". Time passed, many things have been changed but the "Del.icio.us" although many of us hoped for some innovatory shift after the service was acquired by ...

1 Comment

Filed under: Web 2.0

Be Invested and Invest

Author: Jimmy

27 Jul

Now you have got a great idea and start a business that is somewhat proved prosperous but you have had no funding yet, what can you do? Surely, you can find funding around friends, relatives or to write e-mails to angle investors/venture capitalists you know they may be interested in. The common scenario then is your friends don't share the same ...

0 Comments

Filed under: Misc, Web Service Reviews

Why MediaText?

Author: Jimmy

20 Jun

The benefit of keeping eye on sites about online marketing is sometimes you can find out an ad system that suites your better than others like the case of MediaText ads integrated into JTAW blog currently. Previously, I'd once used the same solution provided by Kontera in this blog but I removed it here for several reasons especially due to ...

3 Comments

Filed under: Tools, Web Service Reviews

Woopra â€“ Cool Realtime Analytics Tool

Author: Jimmy

12 May

I'd applied for Woopra beta since the service was introduced in a post from "Web Tools Collection" and just received approval for this blog a few days ago. Running client tool and seeing all info about who are visiting my blog in real-time, I could just say "Wow, so cool!" Woopra provides realtime analytics via a Java-based desktop application so ...

2 Comments

Filed under: Web Service Reviews

TechMacro â€“ The Way I Like to Read Daily Tech News

Author: Jimmy

25 Mar

A few months ago, I told one of my friends, Bill Aue, that I was really tired with going tens of websites to read tech news everyday while my RSS reader had been overloaded with hundreds of feeds. Sometimes it's very hard to find what important news is. Idea and Implementation Then, Bill had an idea of creating a weblog which pulls ...

3 Comments

Filed under: Misc, Web Service Reviews

Building a Mash-up with SynthaSite

Author: Jimmy

13 Mar

In a recent post reviewing service from WebNode -- one of players in rather a crowded market of online site builder -- I mentioned SynthaSite as a serious competitor in the field. A few weeks ago, Monique sent me a shout about SynthaSite's upcoming release with a lot of improvements in site builder and new widgets like Form, Map and ...

4 Comments

Filed under: Web Service Reviews

Rush & Jam

Author: Jimmy

4 Mar

In search to make my blog more popular via link exchange services, I've found BlogRush and registered for the service. BlogRush states itself as a "Cooperative Syndication Network" -- a network of blogs that run a small "widget" on their pages. Each time this widget is loaded it will contain 5 clickable headlines which are the blog post titles to other ...

6 Comments

Filed under: Web Service Reviews

Online Logo Creator

Author: Jimmy

27 Feb

If you are going to start a business, you may have some ideas of your biz name and logo. I have no advice for the name because it is your business, no? :) But you can try to create a logo by yourself with two cool online tools: one is completely free and the other costs around 100 bucks for ...

11 Comments

Filed under: Design, Web Service Reviews

Mobilizing Your Blog in 5 Minutes

Author: Jimmy

26 Feb

As you may notice, I've created a mobile version of this blog using service from WireNode.com. I'm very impressive with the simplicity of the service - it took me only about 5 minutes to do everything. Now you can read JustTalkAboutWeb DOT com from any mobile phone (optimized for iPhone too) via the link: http://justtalkaboutweb.wirenode.mobi/ To get more info about WireNode, ...

11 Comments

Filed under: Web Service Reviews

Pages (3): 1 2 3 »