About

This page is a test of various templates. None of the data you see is stored on this page. Live data from third party sites is being pumped in and applied to the templates, viewable in the source of the page. Usage: The basic process involves pasting the tmpl8 script into your documents head, pointing script tags to external data, and placing the template inside the script tag. The final step is coding a very simple callback to select the range of data to be applied to the template. The examples on this page could be easily modified to work on any page.

the data source (as of July08) has to be in JSON format, bound to or wrapped in a callback function. Most json web services allow the simple passing of name of a callback function in their url. You can also create your own json or javascript files to store data that might be used repeatedly, like the urls of a navigation bar, or use json outputs of databases to rapidly create report viewers.

what's missing

ajax
no way to update dyn data, calling tmpl8 is BIG no-no. can i make it safer?
	-perhaps a saftey built in to prevent doc.write after load.> switch to inerHTML after page is loaded > then re-eval?

-how to use templates to build page script- json templates.
- way to handle data formats other than json:
	-local only
	-csv, xml, m3u	

examples

hello world example

the main idea to understand is that the template substitutes object's keyNames (**name**) for the object's value.

source

<script type='text/javascript'> "hello **name**".tmpl8( { name:"world" } ); </script>

result

links as a list

source

<ol> <script src='/pub/tmpl8/links.js'> <li><a href= "**link**" > **title** </a></li> </script> </ol>
callback function used:  

result

links as a combo

source

<select size='1' onchange='window.open(this.value,"_blank") '> <script src='/pub/tmpl8/links.js'> <option value="**link**">**title**</option> </script> </select>
callback function used:  

result

links as a table

source

<table border='1' cellspacing='0' cellpadding='3' bgcolor="#eeeeee" width="80%"> <caption>dump of link's information</caption> <tr> <th>title</th> <th>link</th> </tr> <script src='/pub/tmpl8/links.js'> <tr> <td>**title**</td> <td>**link**</td> </tr> </script> </table>
callback function used:  

result

dump of link's information

title	link

auto-tag example

source

<script type='text/javascript' src='/pub/autotag.asp'> <img src='~"**ico**" || "html.ico"~' border="0" alt="   " height="16" width="16" />  <a href='**link**' title="**desc**" style="text-decoration: none;">**tit**</a><br /> </script>
callback function used:  

result

del.icio.us example

(5 of my bookmarks)

source

<script type='text/javascript' src="http://feeds.delicious.com/feeds/json/rndme?count=5&callback=tmpl8"> <a href='**u**' title='**dt**'>**n**</a> <br /> </script>
callback function used:  

result

FeaturePics example

source

<script type='text/javascript' src='http://adminservices.featurepics.com/GetImagesJSON.aspx?Callback=fpicCB&Keywords=kitty&Type=IMAGE&NumberPerPage=24'> <a href='**ImagePage**' target="_blank"><img src="**ImageFile**" alt="**ImageName**" title="**ImageName**" border="0" /> </a> </script>
callback function used:  

result

weather example

source

<script type='text/javascript' src='http://ws.geonames.org/findNearByWeatherJSON?lat=40&lng=-88&callback=weatherCB'> temperature: **temperature** <br /> humidity: **humidity** % <br /> wind speed: **windSpeed** <br /> dew point : **dewPoint** <br /> </script>
callback function used:  

result

tumblr example

source

<script type='text/javascript' src='http://dldavis2.tumblr.com/api/read/json?callback=tumblCB'> <b><a href='**url**'>**regular-title**</a></b> -   **regular-body**</script><br />
callback function used:  

result

RSS Feed example

(via yahoo pipes)

source

<script type='text/javascript' src="http://pipes.yahoo.com/pipes/9oyONQzA2xGOkM4FqGIyXQ/run?&_render=json&_callback=rssCB&feed=http%3A%2F%2Fwww.nytimes.com%2Fservices%2Fxml%2Frss%2Fnyt%2FPolitics.xml"> <big> <a target="_blank" href='**link**' > **title** </a> </big> <br /> <small> **pubDate** </small><br />        <span class="item"> **description** </span> </script>
callback function used:  

result

digg hot stories

advanced example: uses javascript in template

source

<table border='1' cellspacing='1' cellpadding='1' > <tr bgcolor="#0000bb"> <th>#</th> <th>title</th> <th>image</th> <th>date</th> <th>description</th> </tr> <script> var rw=1; </script> <script src= "http://services.digg.com/stories/hot?appkey=http%3A%2F%2Fexample.com&type=javascript&callback=diggCB"> <tr style="background-color:~(rw%2)?'#cce':'#fff'~"> <td>~String(rw++).bold()~</td> <td><a href='**link**'>**title**</a></td> <td><img src="~**thumbnail**.src~" /></td> <td>~new Date(Number( "**submit_date**"+"000")).toLocaleDateString()~</td> <td>**description**</td> </tr> </script> </table>
callback function used:  

result

#	title	image	date	description

Calender example

(standalone external example; doesn't need tmpl8 to work)

source

<script type='text/javascript' src='/pub/cal2.htm' onload="document.title=this.src" > </script>
callback function used:  

result

Google Calendar example

(advanced: javascript in template)

source

<ul> <script src="http://www.google.com/calendar/feeds/developer-calendar@google.com/public/full?alt=json-in-script&callback=googleCalCB" type='text/javascript'> <li><a href='~**link**[0].href~'> ~**title**.$t~</a></li> </script> </ul>
callback function used:  

result

twitter example

advanced example (JavaScript in template)

source

<script type='text/javascript' src='http://search.twitter.com/search.json?callback=twitterCB&q=obama'> <a href='http~"**text**".split(/http/)[1]~'>~"**text**".split(/http/)[0]~<br /> </script>
callback function used:  

result

meta carta example

source

<script type='text/javascript' src='http://ondemand.metacarta.com/webservices/search/JSON/session?version=1.0.0&action=getLocationReferences&query=urbana-&mime=text/plain&bbox=-180,-90,180,90&maxrefs=5&grid=1,1&sess=3611&token=7713b88361ca7a4d659c17a8ecfbf5f1&callback=metaCartaCB'> <a href='**URL**'> **Title**</a><br /> </script>
callback function used:  

result

revver example

source

<ol> <script type='text/javascript' src='https://api.revver.com/json/1.0?method=open.collection.collect¶ms=[593%2C[%22id%22%2C%22title%22%2C%22views%22%2C%22owner%22%2C[%22thumbnailUrl%22%2C{%22width%22%3A150%2C%22height%22%3A100}]]%2C{%22limit%22%3A5%2C%22offset%22%3A0%2C%22count%22%3Atrue}]&callback=revverCB&callback_params=1217519922926.1&noCache=1217519922926'> <li><img src="**thumbnailUrl**" width="75" height="50" alt="**title**" border="2" />   <a target="_blank" href='http://revver.com/video/**id**'> **title**</a></li> </script> </ol>
callback function used:  

result

wakoopa example

source

<script type='text/javascript' src='http://api.wakoopa.com/wouter/most_used.json?callback=wakoopaCB'> <a href='**url**'> **name** </a> <br /> </script>
callback function used:  

result

rssme example

source

<script type='text/javascript' src='http://www.rssmeme.com/api/?output=json&callback=rssmemeCB'> <a href='**link**' title='~"**pub_date**".split(/T/)[0]~'>**title**</a><br /> </script>
callback function used:  

result

Yahoo Image search

source

<script type='text/javascript' src="http://search.yahooapis.com/ImageSearchService/V1/imageSearch?appid=YahooDemo&query=obama&output=json&callback=yahooSerachCB"> <img src="**Url**" alt="**Title**" title="**Summary**" border="2" height="**Height**" width="**Width**" />   </script>
callback function used:  

result