pure/gist:7390139

## gistfile1.html
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<title></title>
	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
	<script src="http://pure.github.io/pure/libs/pure.js"></script>
</head>
<body>
	<div class="test">
		<ul>
			<li class="car">
				<ul>
					<li class="accessory">
						<span></span>
					</li>
				</ul>
			</li>
		</ul>
	</div>
	<script>

		var data = {
			cars:[
				{brand:'bmw', accessories:[{name:'air conditionning'}, {name:'automatic'}]},
				{brand:'land rover', accessories:[{name:'heating system'}, {name:'surround sound'}]}
			],
			selectedBrand:'land rover'
		},

		dir = {
			'li.car':{
				'car<-cars':{
					'li.accessory':{
						'accessory<-car.accessories':{
							'span':function(a){
								return a.car.item.brand + ': ' + a.accessory.item.name;
							}
						}
					}
				},
				filter:function(a){
					return this.brand === a.context.selectedBrand;
				}
			}
		};

		$('.test').render(data, dir);

	</script>
</body>
</html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="utf-8">
	<title></title>
	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
	<script src="http://pure.github.io/pure/libs/pure.js"></script>
	</head>
	<body>
	<div class="test">
	<ul>
	<li class="car">
	<ul>
	<li class="accessory">
	<span></span>
	</li>
	</ul>
	</li>
	</ul>
	</div>
	<script>

	var data = {
	cars:[
	{brand:'bmw', accessories:[{name:'air conditionning'}, {name:'automatic'}]},
	{brand:'land rover', accessories:[{name:'heating system'}, {name:'surround sound'}]}
	],
	selectedBrand:'land rover'
	},

	dir = {
	'li.car':{
	'car<-cars':{
	'li.accessory':{
	'accessory<-car.accessories':{
	'span':function(a){
	return a.car.item.brand + ': ' + a.accessory.item.name;
	}
	}
	}
	},
	filter:function(a){
	return this.brand === a.context.selectedBrand;
	}
	}
	};

	$('.test').render(data, dir);

	</script>
	</body>
	</html>