Great Javascript template library Mustache

I looked for a template library as more and more data is transferred through XMLHttpRequest and the displayed html gets more difficult. First I found  JQuery template library by John Resig, the only problem is that the project seemed to be abandoned. With the release of Node.js there are now more and more javascript template libraries like Jade, EJS, Haml, and others. After googeling I found another great library called Mustache, I like it as it is easy to learn and the concept seems great.

After trying out the library I made small example how to use it.

The template.tpl is the file that contains the mustache syntax + html.

		$.get('template.tpl', function(page) {
			$.getJSON('http://api.flickr.com/services/feeds/photos_public.gne?jsoncallback=?',
				{ tags: 'cars', tagmode: 'any', format: 'json'}, function(data) {
				$('#gallery').html(Mustache.to_html(page, data));		
			});
		});

Example of how the mustache syntax would look.

{{#items}}
<div class="image">
	<div>
		<a href="{{link}}"><img src="{{media.m}}" width="240" height="180" title="{{title}}" /></a>
	</div>
</div>
{{/items}}

Full project code located on github https://github.com/riston/mustache-demo

About these ads

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s