vadimdemedes/gist:5225587

## gistfile1.html
<!doctype html>
<html>
<head>
	<meta charset="utf-8">
	<title>Grid</title>
	<script src="//code.jquery.com/jquery-1.9.1.min.js"></script>
	<!-- include Chute.js -->
	<script src="//cdn.getchute.com/v3/chute.min.js" data-load="view"></script>
	<style> /* Some basic styling for a grid */
	div.assets {
		width:1000px;
		margin:20px auto;
	}

	div.asset {
		float:left;
		margin:10px;
	}

	div.asset img {
		width:180px;
		height:180px;
	}
	</style>
	<!-- Template for a container element -->
	<script class="container-template" type="application/x-template">
		<div class="assets"></div>
	</script>
	<!-- Template for an item element -->
	<script class="item-template" type="application/x-template">
		<div class="asset">
			<img src="{{ asset.url }}/200x200">
		</div>
	</script>
	<script>
	Chute.ready(function(){ // run after view was loaded
		var GridItemView = Chute.View.extend({ // view for a single data item
			template: 'script.item-template' // specifying template via selector
		});

		var GridView = Chute.CollectionView.extend({ // view for a collection of data items
			template: 'script.container-template',
			itemView: GridItemView // specifying item view for a collection
		});

		var grid = new GridView({
			container: 'div.grid', // set div.grid as a container for a view
			data: new Chute.API.Assets({ album: '9IZukfpi' }).toData() // specify a data set for a collection view
		});
	});
	</script>
</head>
<body>
	<div class="grid"></div>
</body>
</html>
	<!doctype html>
	<html>
	<head>
	<meta charset="utf-8">
	<title>Grid</title>
	<script src="//code.jquery.com/jquery-1.9.1.min.js"></script>
	<!-- include Chute.js -->
	<script src="//cdn.getchute.com/v3/chute.min.js" data-load="view"></script>
	<style> /* Some basic styling for a grid */
	div.assets {
	width:1000px;
	margin:20px auto;
	}

	div.asset {
	float:left;
	margin:10px;
	}

	div.asset img {
	width:180px;
	height:180px;
	}
	</style>
	<!-- Template for a container element -->
	<script class="container-template" type="application/x-template">
	<div class="assets"></div>
	</script>
	<!-- Template for an item element -->
	<script class="item-template" type="application/x-template">
	<div class="asset">
	<img src="{{ asset.url }}/200x200">
	</div>
	</script>
	<script>
	Chute.ready(function(){ // run after view was loaded
	var GridItemView = Chute.View.extend({ // view for a single data item
	template: 'script.item-template' // specifying template via selector
	});

	var GridView = Chute.CollectionView.extend({ // view for a collection of data items
	template: 'script.container-template',
	itemView: GridItemView // specifying item view for a collection
	});

	var grid = new GridView({
	container: 'div.grid', // set div.grid as a container for a view
	data: new Chute.API.Assets({ album: '9IZukfpi' }).toData() // specify a data set for a collection view
	});
	});
	</script>
	</head>
	<body>
	<div class="grid"></div>
	</body>
	</html>