explore.html

---
layout: page
title: Explore
---
<h1>Explore <span class="dataset"></span></h1>
<hr />
<div id="datasets">
	<h2 class="message">Loading datasets...</h2>
	<i class="fa fa-spinner fa-3x fa-spin"></i>
</div>

<!-- script for dynamically adding datasets to page -->
<script>
	require([
		'jquery',
		'collections/datasets',
		'views/explore/dataset-view'
	], function ($, Datasets, DatasetView) {

		// fetch datasets
		//
		new Datasets().fetch({

			// callbacks
			//
			success: function(collection) {
				$('#datasets').empty();

				// render datasets
				//
				for (var i = 0; i < collection.length; i++) {

					// create a new row every two datasets
					//
					if (i % 2 == 0) {
						var $row = $('<div class="row"></div>');
						$('#datasets').append($row);
					}

					// add dataset to row
					//
					$row.append(new DatasetView({
						model: collection.at(i)
					}).render().$el);
				}
			}
		});
	});
</script>