JavaScript plates example

Example on howto use the JavaScript plates library

See for details

	<title>Plates Example</title>
		#results li.pass { color: green; }
		#results { color: red; }
	<ul id="results"></ul>
	<div id="test1">
		Some links:<br/>
		<a href="#route1">#route1</a> - clear result<br/>
		<a href="#route2">#route2</a> - single contact<br/>
		<a href="#route3">#route3</a> - several contacts<br/>
		<a href="#route4">#route4</a><br/>

	<div id="ui">

	<!-- Templates -->
	<script type="text/template" id="template1">
		<ul class="contacts">
		  <li class="contact">
		    <span class="address">Git URL</span> - <span class="name">name</span>

	<script type="text/template" id="template2">
		  <a href="/">link</a>
	<!-- Scripts at the end for better performance -->

	<script type="text/javascript" src=""></script>

	<script type="text/javascript" src=""></script>

	<script src=""></script>
	<script src=""></script>
	<script src=""></script>

	<script src=""></script>

	window.onload = function(){

		var h = helpers.create();

		h.test("Testing to use the plates library.", function(){
			// setup crossroads, using the global object. 
			// It is also possible to have several independent Routers
			crossroads.addRoute('route1', function() { 


				h.log('logging static route1...');} 
			crossroads.addRoute('route2', function() {

				var html = $('#template1').html();
				var data = { 
					"address": "",
					"name": "Jonas"

				var output = Plates.bind(html, data);  // not using the third map argument

				h.log('logging static route2...');} 
			crossroads.addRoute('route3', function() {

				var html = $('#template2').html();

				var data = [ 
					{ "url": "/a" },
					{ "url": "/b" },
					{ "url": "/c" }

				var map = Plates.Map();

				var output = Plates.bind(html, data, map);

				h.log('logging static route3...'+output);} 
			// Also log routes that did not match anything (useful for debugging)
				h.log("A route that wasn't matched:"+request); 
			//setup hasher
			function parseHash(newHash, oldHash){
			hasher.initialized.add(parseHash); 			// parse initial hash 
			hasher.changed.add(parseHash); 				// parse hash changes 
			hasher.init(); 								// start listening for history change
			//update URL fragment generating new history record