JsRender Your Google Gadget

During a couple of my last projects I used JsRender as HTML templating engine. Although it isn't even in beta, the results are very satisfying. It's fast, featured, easy/readable syntax and very active in development.

Now I needed some templating Gadgets for my personal Google Site, but unfortunately couldn't find any JsRender based solution. Since it was for personal use only and I didn't want to learn another syntax for this, I decided to build one. Using external gadgets resulted in too much clutter.



The gadget allows you to bind a JSON or XML webservice to a HTML template. All the gadget needs is the datasource and template URL's and optionally a CSS link.

In this example I used a Last.fm webservice that returned my 10 latest played tracks with some extra info. 

The returned data looks like this:

Based on this structure I created a simple template that shows the first 5 tracks with artist and link in a list. If you're not familiar with the JsRender syntax, more info and demos. The gadget supports Livestamp.

<ul>
{{for recenttracks.track}}
{{if #index < 5}}
<li>
<a target="_blank" href="{{>url}}">
{{>name}}
</a>
<br/>
{{>artist["#text"]}}
</li>
{{/if}}
{{/for}}
</ul>

I saved the file with a .tmpl.html extension and uploaded it somewhere. After this, I added a new gadget by url to a page and used this url:

https://sites.google.com/a/achappey.nl/achappey-nl/home/develop/data2html/sources/Data2HTML.xml

This option screen appears:

Type	Format of the datasource (JSON or XML)
Datasource	URL of the datasource
Template	URL of the JsRender template
Javascript	URL of custom Javascript files that needs to be loaded, for example for JsRender helper  functions (optional)
CSS	URL of CSS file
Disable caching	Normally, the template and the data are cached for about an hour, but with this option  enabled the template and data will be refreshed every request.
Linkify	Enable this if you want to Linkify. Wrap the content that needs to be linkified in  a linkify css class
Hashtag search prefix	URL prefix that's used  to Linkify hashtags (optional)

The options I used for this demo:

Type	JSON
Datasource	http://ws.audioscrobbler.com/2.0/?method=user.getrecenttracks&user=achappey&api_key=80b1326fb347ed61e59f65a782480c3e&format=json
Template	https://sites.google.com/a/achappey.nl/achappey-nl/home/develop/data2html/sources/tracksDemo.tmpl.html

You can see this demo in action here. And more here and here.