pure/gist:1165355

## gistfile1.html
<!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></title>
	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
	<script src="http://github.com/pure/pure/raw/master/libs/pure.js"></script>
</head>
<body>
	<div id="template">
		<div class="Region">
			<table class="League" border="1">
				<thead>
					<tr>
						<th class="Region_League"></th>
					</tr>
				</thead>
				<tbody>
					<tr>
						<td class='Event'></td>
					</tr>
				</tbody>
			</table>
		</div>
	</div>
	<script>
		var data = {
			"SportId" : 53,
			"Regions" : [
				{
					'RegionId' : 'England',
					'Leagues' : [
						{
							'LeagueCupdId': 'Premier League 1',
							'Events':[
								{ 'name': 'AS Milano'},
								{ 'name': 'FC Barcelona'}
							]
						},{
							'LeagueCupdId': 'Premier League 2',
							'Events':[
								{ 'name': 'Team 1'},
								{ 'name': 'Team 2'}
							]
						}
					]
				}
			]
		},
		dir = {
			'div.Region':{
				'Region<-Regions':{
					'table':{
						'League<-Region.Leagues':{
							'th':'#{Region.RegionId} - #{League.LeagueCupdId}',
							'th@colspan':'#{League.Events.length}',
							'td':{
								'Event<-League.Events':{
									'.':'Event.name'
								}
							}
						}
					}
				}
			}
		};

		$('#template').render(data, dir);
	</script>
</body>
</html>
	<!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></title>
	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
	<script src="http://github.com/pure/pure/raw/master/libs/pure.js"></script>
	</head>
	<body>
	<div id="template">
	<div class="Region">
	<table class="League" border="1">
	<thead>
	<tr>
	<th class="Region_League"></th>
	</tr>
	</thead>
	<tbody>
	<tr>
	<td class='Event'></td>
	</tr>
	</tbody>
	</table>
	</div>
	</div>
	<script>
	var data = {
	"SportId" : 53,
	"Regions" : [
	{
	'RegionId' : 'England',
	'Leagues' : [
	{
	'LeagueCupdId': 'Premier League 1',
	'Events':[
	{ 'name': 'AS Milano'},
	{ 'name': 'FC Barcelona'}
	]
	},{
	'LeagueCupdId': 'Premier League 2',
	'Events':[
	{ 'name': 'Team 1'},
	{ 'name': 'Team 2'}
	]
	}
	]
	}
	]
	},
	dir = {
	'div.Region':{
	'Region<-Regions':{
	'table':{
	'League<-Region.Leagues':{
	'th':'#{Region.RegionId} - #{League.LeagueCupdId}',
	'th@colspan':'#{League.Events.length}',
	'td':{
	'Event<-League.Events':{
	'.':'Event.name'
	}
	}
	}
	}
	}
	}
	};

	$('#template').render(data, dir);
	</script>
	</body>
	</html>