vadimdemedes/gist:5225637

## gistfile1.html
<!doctype html>
<html>
<head>
	<meta charset="utf-8">
	<title>Wookmark</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>
	<!-- Template for a container element -->
	<script class="container-template" type="application/x-template">
		<div class="assets"></div>
	</script>
	<!-- Template for a single image -->
	<script class="item-template" type="application/x-template">
		<div class="asset">
			<img src="{{ asset.url }}/w/200">
		</div>
	</script>
	<script>
	Chute.ready(function(){
		// run when all dependencies were loaded
		// view component in this case, specified in data-load attribute of including script

		var WallItemView = Chute.View.extend({ // view for a single data item
			template: 'script.item-template' // specifying template via selector
		});

		var scroll = Chute.View.Plugins.InfiniteScroll.extend({ // initializing infinite scroll plugin
			global: true // telling to bind to window's scroll event
		});

		var WallView = Chute.CollectionView.extend({ // view for a data collection
			template: 'script.container-template',
			itemView: WallItemView, // pointing to the view for every data item in the collection
			dependencies: { // setting js & css dependencies, will be loaded asynchronously
				js: ['lib/jquery.wookmark.min.js', 'lib/jquery.imagesloaded.min.js'],
				css: ['stylesheets/grid.css']
			},
			plugins: [scroll], // injecting plugins

			initialize: function(){ // custom initialize function
				this.on('render', $.proxy(this.initWookmark, this)); // initialize wookmark when view was rendered

				var self = this;

				this.once('wookmark:init', function(){
					// custom-made event, responding only once
					// binding to a data:load event and adding newly loaded images to the wall
					self.on('data:load', $.proxy(self.addAssets, self));
				});
			},

			initWookmark: function(){
				var self = this;

				this.$el.imagesLoaded(function(){ // waiting for all images to load
					self.$el.find('div.asset').wookmark($.extend({}, { container: self.$el }, self.options.options.wookmark));
					self.trigger('wookmark:init'); // emitting custom event, for convenience
				});
			},

			addAssets: function(){ // adding newly loaded assets to the wall
				var self = this;

				_(this.data.items()).forEach(function(item){
					self.add(item);	// will insert a new WallItemView with a specified data in item variable
				});

				this.initWookmark(); // re-initialize wookmark to pick up those new images
			}
		});

		var wall = new WallView({
			data: new Chute.API.Assets({ album: '9IZukfpi' }).toData(), // set of images
			container: 'div.wall', // insert wall into div.wall
			options: { // custom options for wookmark plugin
				wookmark: {
					offset: 2,
					itemWidth: 210
				}
			}
		});
	});
	</script>
</head>
<body>
	<div class="wall"></div>
</body>
</html>
	<!doctype html>
	<html>
	<head>
	<meta charset="utf-8">
	<title>Wookmark</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>
	<!-- Template for a container element -->
	<script class="container-template" type="application/x-template">
	<div class="assets"></div>
	</script>
	<!-- Template for a single image -->
	<script class="item-template" type="application/x-template">
	<div class="asset">
	<img src="{{ asset.url }}/w/200">
	</div>
	</script>
	<script>
	Chute.ready(function(){
	// run when all dependencies were loaded
	// view component in this case, specified in data-load attribute of including script

	var WallItemView = Chute.View.extend({ // view for a single data item
	template: 'script.item-template' // specifying template via selector
	});

	var scroll = Chute.View.Plugins.InfiniteScroll.extend({ // initializing infinite scroll plugin
	global: true // telling to bind to window's scroll event
	});

	var WallView = Chute.CollectionView.extend({ // view for a data collection
	template: 'script.container-template',
	itemView: WallItemView, // pointing to the view for every data item in the collection
	dependencies: { // setting js & css dependencies, will be loaded asynchronously
	js: ['lib/jquery.wookmark.min.js', 'lib/jquery.imagesloaded.min.js'],
	css: ['stylesheets/grid.css']
	},
	plugins: [scroll], // injecting plugins

	initialize: function(){ // custom initialize function
	this.on('render', $.proxy(this.initWookmark, this)); // initialize wookmark when view was rendered

	var self = this;

	this.once('wookmark:init', function(){
	// custom-made event, responding only once
	// binding to a data:load event and adding newly loaded images to the wall
	self.on('data:load', $.proxy(self.addAssets, self));
	});
	},

	initWookmark: function(){
	var self = this;

	this.$el.imagesLoaded(function(){ // waiting for all images to load
	self.$el.find('div.asset').wookmark($.extend({}, { container: self.$el }, self.options.options.wookmark));
	self.trigger('wookmark:init'); // emitting custom event, for convenience
	});
	},

	addAssets: function(){ // adding newly loaded assets to the wall
	var self = this;

	_(this.data.items()).forEach(function(item){
	self.add(item); // will insert a new WallItemView with a specified data in item variable
	});

	this.initWookmark(); // re-initialize wookmark to pick up those new images
	}
	});

	var wall = new WallView({
	data: new Chute.API.Assets({ album: '9IZukfpi' }).toData(), // set of images
	container: 'div.wall', // insert wall into div.wall
	options: { // custom options for wookmark plugin
	wookmark: {
	offset: 2,
	itemWidth: 210
	}
	}
	});
	});
	</script>
	</head>
	<body>
	<div class="wall"></div>
	</body>
	</html>