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
