Experiment with Instagram API, jQuery, and Knockout.js

the_photo_grid.html

<tbody data-bind="foreach: photoList">
	<tr>
		<td>
			<span>user: </span><strong><span data-bind="text: user.username"></span></strong><br/>
			<span data-bind="text: 'created_time at '+created_time"></span><br/>
		</td>
		<td>
			<img data-bind="attr:{src: images.thumbnail.url}" width="90"/>&nbsp;&nbsp;
			<a href="#myModal" role="button" class="btn btn-primary btn-large" data-toggle="modal" data-bind="click: $root.showLargeImage">View</a>
		</td>
	</tr>
</tbody>

the_pop-up.html

<div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
	<div class="modal-header">
		<button type="button" class="close" data-dismiss="modal" aria-hidden="true">x</button>
		<h3 data-bind="text: headerImage"></h3>
	</div>
	<div class="modal-body"><img data-bind="attr:{src: largeImage}"/></div>
	<div class="modal-footer"><p data-bind="text: footerImage"></p></div>
</div>

the_search_input.html

<div class="input-prepend">
	<span class="add-on">#</span>
	<input class="span2" id="prependedInput" type="text" data-bind="value: tag" placeholder="masukkan tag di sini">
</div>

the_view-model.js

function InstagramViewModel(data) {
	var self = this;
				
	self.tag = ko.observable();
	self.largeImage = ko.observable();
	self.headerImage = ko.observable();
	self.footerImage = ko.observable();
	self.photoList = ko.observableArray([]);
				
	self.refreshPhotoList = function() {
		$('#processtext').html("loading...");
		$.getJSON("https://api.instagram.com/v1/tags/"+self.tag()+"/media/recent?client_id=338d5851723f4ce798f24cedd5d57034&callback=?", function(allData) {
			$('#processtext').html("");
			self.photoList(allData.data);
		});
	}
	
	self.showLargeImage = function(data) {
		self.largeImage(data.images.standard_resolution.url);
		self.headerImage(data.user.username);
		self.footerImage(data.caption.text);
	}
}
			
var vm = new InstagramViewModel();
ko.applyBindings(vm);
vm.refreshPhotoList();