Tempo JSON & Dribbble
HTML
<div id="main" role="main">
<ul id="dribbble">
<li data-template style="display:none;">
<a href="{{url}}">
<img src="{{image_url}}" width="400" height="300"/>
</a>
<h3>{{shots.title}}</h3>
<h4>by <a href="{{player.url}}">{{shots.player.name}}</a></h4>
</li>
</ul><!-- /dribbble -->
</div>
JavaScript
function TempoEvent(type,item,element){this.type=type;this.item=item;this.element=element;return this}TempoEvent.Types={RENDER_STARTING:'render_starting',ITEM_RENDER_STARTING:'item_render_starting',ITEM_RENDER_COMPLETE:'item_render_complete',RENDER_COMPLETE:'render_complete'};var Tempo=(function(tempo){var utils={startsWith:function(str,prefix){return(str.indexOf(prefix)===0)},replaceVariable:function(item,str){return str.replace(/\{\{([A-Za-z0-9\._]*?)\}\}/g,function(match,variable){var val=eval('item.'+variable);if(val!==undefined){return val}return''})},clearContainer:function(el){if(el!==undefined&&el.childNodes!==undefined){for(var i=el.childNodes.length;i>=0;i--){if(el.childNodes[i]!==undefined&&el.childNodes[i].getAttribute!==undefined&&el.childNodes[i].getAttribute('data-template')!==null){el.childNodes[i].parentNode.removeChild(el.childNodes[i])}}}},isNested:function(el){var p=el.parentNode;while(p){if(p.getAttribute!==undefined&&p.getAttribute('data-template')!==null){return true}p=p.parentNode}return false},equalsIgnoreCase:function(str1,str2){return str1.toLowerCase()===str2.toLowerCase()},getElement:function(template,html){if(utils.equalsIgnoreCase(template.tagName,'tr')){var el=document.createElement('div');el.innerHTML='<table><tbody>'+html+'</tbody></table>';var depth=3;while(depth--){el=el.lastChild}return el}else{template.innerHTML=html;return template}},typeOf:function(obj){if(typeof(obj)==="object"){if(obj===null){return"null"}if(obj.constructor===([]).constructor){return"array"}if(obj.constructor===(new Date()).constructor){return"date"}if(obj.constructor===(new RegExp()).constructor){return"regex"}return"object"}return typeof(obj)},notify:function(listener,event){if(listener!==undefined){listener(event)}}};function Templates(nested){this.defaultTemplate=null;this.namedTemplates={};this.container=null;this.nested=nested!==undefined?nested:false;return this}Templates.prototype={parse:function(container){this.container=container;var...