Friendpaste

--- Revision None
+++ Revision 353037373063
@@ -0,0 +1,74 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
+   "http://www.w3.org/TR/html4/strict.dtd">
+
+<html lang="en">
+<head>
+	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
+	<title>Reuse a compiled template - Show timezone current time</title>
+
+	<script src="../libs/sizzle.js"></script>
+	<script src="../libs/pure2.js"></script>
+</head>
+<body>
+
+	<div id="clock">
+		It is now <span class="hour"></span> : <span class="minute"></span> : <span class="second"></span><br />
+		In <span class="tz"></span>
+	</div>
+	<p><a href="#" onclick="clearTimeout(_to);return false;">stop</a></p>
+
+	<script>
+		(function(){
+			var	
+				// Get the html source cross lib, using $p
+				// adapt it to your library, i.e: $( '#clock' ) in jQuery
+				html = $p( '#clock' ),
+
+				// json service returning the current time for a timezone
+				tz = 'Europe/Brussels',
+				url = 'http://json-time.appspot.com/time.json?tz='+tz+'&callback=showTime&cache=',
+
+				//directive to render the template
+				directive = {
+					'span.hour': overlay('hour'),
+					'span.minute': overlay('minute'),
+					'span.second': overlay('second'),
+					'span.tz': 'tz'
+				},
+
+				// compile the template once
+				template = html.compile( directive );
+
+			// utility fn to add leading 0 to numbers
+			function overlay(what){
+				return function(a){
+					var val = a.context[what];
+					return val === 0 ? '00' : val < 10 ? '0' + val : val;
+				};
+			}
+
+			// JSONP load - script injection with callback function
+			var noCache = 0;
+			function loadTime(){
+				var	old = document.getElementById('dataLoad'),
+					s = document.createElement("script");
+				s.src = url + noCache++;
+				!old ? document.body.appendChild(s) : document.body.replaceChild(s, old);
+				s.id = 'dataLoad';
+			}
+
+			// callback function to Render the template
+			window.showTime = function(data){
+				// rendering but reusing the compiled function template
+				html = html.render( data, template );
+				// redo it every sec
+				window._to = setTimeout( loadTime, 1000 );
+			};
+
+			// Call the time service
+			loadTime();
+		}());
+
+	</script>
+</body>
+</html>
a	b
	0	+	<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
	0	+	"http://www.w3.org/TR/html4/strict.dtd">
	0	+
	0	+	<html lang="en">
	0	+	<head>
	0	+	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	0	+	<title>Reuse a compiled template - Show timezone current time</title>
	0	+
	0	+	<script src="../libs/sizzle.js"></script>
	0	+	<script src="../libs/pure2.js"></script>
	0	+	</head>
	0	+	<body>
	0	+
	0	+	<div id="clock">
	0	+	It is now <span class="hour"></span> : <span class="minute"></span> : <span class="second"></span><br />
	0	+	In <span class="tz"></span>
	0	+	</div>
	0	+	<p><a href="#" onclick="clearTimeout(_to);return false;">stop</a></p>
	0	+
	0	+	<script>
	0	+	(function(){
	0	+	var
	0	+	// Get the html source cross lib, using $p
	0	+	// adapt it to your library, i.e: $( '#clock' ) in jQuery
	0	+	html = $p( '#clock' ),
	0	+
	0	+	// json service returning the current time for a timezone
	0	+	tz = 'Europe/Brussels',
	0	+	url = 'http://json-time.appspot.com/time.json?tz='+tz+'&callback=showTime&cache=',
	0	+
	0	+	//directive to render the template
	0	+	directive = {
	0	+	'span.hour': overlay('hour'),
	0	+	'span.minute': overlay('minute'),
	0	+	'span.second': overlay('second'),
	0	+	'span.tz': 'tz'
	0	+	},
	0	+
	0	+	// compile the template once
	0	+	template = html.compile( directive );
	0	+
	0	+	// utility fn to add leading 0 to numbers
	0	+	function overlay(what){
	0	+	return function(a){
	0	+	var val = a.context[what];
	0	+	return val === 0 ? '00' : val < 10 ? '0' + val : val;
	0	+	};
	0	+	}
	0	+
	0	+	// JSONP load - script injection with callback function
	0	+	var noCache = 0;
	0	+	function loadTime(){
	0	+	var old = document.getElementById('dataLoad'),
	0	+	s = document.createElement("script");
	0	+	s.src = url + noCache++;
	0	+	!old ? document.body.appendChild(s) : document.body.replaceChild(s, old);
	0	+	s.id = 'dataLoad';
	0	+	}
	0	+
	0	+	// callback function to Render the template
	0	+	window.showTime = function(data){
	0	+	// rendering but reusing the compiled function template
	0	+	html = html.render( data, template );
	0	+	// redo it every sec
	0	+	window._to = setTimeout( loadTime, 1000 );
	0	+	};
	0	+
	0	+	// Call the time service
	0	+	loadTime();
	0	+	}());
	0	+
	0	+	</script>
	0	+	</body>
	0	+	</html>
...