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:
The options I used for this demo:
| 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.
