pure/gist:875195

## 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>
	Max:<input onkeyup="filterRooms(this)" value="250" />
	<ul>
		<li class="hotel">
			<span class="name"></span>
			<ol>
				<li class="room">
					<span class="type"></span>
					<span class="price"></span>
				</li>
			</ol>
		</li>
	</ul>
	<script>
		(function(){
			var max, template, //max and template need to be defined here for the closure
				data = {
					hotels:[
						{name:'Holiday Inn', rooms:
							[{
								type:'deluxe',
								price:200
							},{
								type:'normal',
								price:100
							}]
						},
						{name:'Bristol', rooms:
							[{
								type:'deluxe',
								price:250
							},{
								type:'normal',
								price:150
							}]
						}
					]
				},
				dir = {
					'li.hotel':{
						'hotel<-hotels':{
							'span.name':'hotel.name',
							'li.room':{
								'room<-hotel.rooms':{
									'span.type':'room.type',
									'span.price':'room.price'
								},
								filter:function(a){
									//use the max closure if set
									return !(max && this.price > max);
								}
							}
						}
					}
				};
				window.filterRooms = function(inp){
					template = template || $('ul').compile(dir); //compile the template if needed
					max = inp ? +inp.value : false; //set the max closure
					$('ul')
						.render(data, template)
						.find('li.hotel')
						.each(function(){ //post processing to check if rooms set
							if( this.getElementsByTagName('LI').length === 0 ){
								this.style.display = 'none';
							}
						});
				};
				filterRooms();
		})();
	</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>
	Max:<input onkeyup="filterRooms(this)" value="250" />
	<ul>
	<li class="hotel">
	<span class="name"></span>
	<ol>
	<li class="room">
	<span class="type"></span>
	<span class="price"></span>
	</li>
	</ol>
	</li>
	</ul>
	<script>
	(function(){
	var max, template, //max and template need to be defined here for the closure
	data = {
	hotels:[
	{name:'Holiday Inn', rooms:
	[{
	type:'deluxe',
	price:200
	},{
	type:'normal',
	price:100
	}]
	},
	{name:'Bristol', rooms:
	[{
	type:'deluxe',
	price:250
	},{
	type:'normal',
	price:150
	}]
	}
	]
	},
	dir = {
	'li.hotel':{
	'hotel<-hotels':{
	'span.name':'hotel.name',
	'li.room':{
	'room<-hotel.rooms':{
	'span.type':'room.type',
	'span.price':'room.price'
	},
	filter:function(a){
	//use the max closure if set
	return !(max && this.price > max);
	}
	}
	}
	}
	};
	window.filterRooms = function(inp){
	template = template \|\| $('ul').compile(dir); //compile the template if needed
	max = inp ? +inp.value : false; //set the max closure
	$('ul')
	.render(data, template)
	.find('li.hotel')
	.each(function(){ //post processing to check if rooms set
	if( this.getElementsByTagName('LI').length === 0 ){
	this.style.display = 'none';
	}
	});
	};
	filterRooms();
	})();
	</script>
	</body>
	</html>