tresbailey · July 13, 2012 19:30
diff --git a/gistfile1.txt b/gistfile1.txt
 <!DOCTYPE html>

 <html>
    <head>
        <title>Backbone with Mighty Moo Photos</title>
    </head>
    <body>
        <ul id="albums-list">
        </ul>
        <ul id="friends-list">
        </ul>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
        <script src="http://ajax.cdnjs.com/ajax/libs/underscore.js/1.1.4/underscore-min.js"></script>
        <script src="http://ajax.cdnjs.com/ajax/libs/backbone.js/0.3.3/backbone-min.js"></script>
        <script type="text/javascript">
            (function ($) {

            Album = Backbone.Model.extend({
                id: null,
                cover_photo: null,
                name: null,
                created_time: null
            });
            Photo = Backbone.Model.extend({
                source: null,
                name: null
            });

            Albums = Backbone.Collection.extend({
                initialize: function(models, options) {
                    // Just binds a listener for when a new photo is added to the collection
                    this.bind("add", options.view.addAlbumLi);
                }
            });
            Photos = Backbone.Collection.extend({
                initialize: function(models, options) {
                    // Just binds a listener for when a new photo is added to the collection
                    this.bind("add", options.view.addPhotoLi);
                }
            });

            window.AppView = Backbone.View.extend({
                el: $("body"),
                initialize: function () {
                    // Initializes the albums and photos collections
                    this.albums = new Albums(null, {view: this});
                    this.photos = new Photos(null, {view: this});
                    var that = this;
                    $.ajax({ url: "https://graph.facebook.com/203771702995922/albums/",
                        // AJAX to FB for getting MightyMoo albums
                        dataType: "json",
                        success: function (data, textStatus, jqXHR) {
                            $.each(data['data'], function(index, value) {
                                // Album object has subset of tag names from FB response
                                var album = new Album(value);
                                that.albums.add(album);
                            });
                        }
                    });
                },
                events: {
                    "click #album-names": "showAlbum" // binds click handler for albums
                },
                addPhotoLi: function (model) {
                    // Adds small photo to DOM
                    $("#friends-list").append("<img src=\""+ model.get('source') +"\" />");
                },
                addAlbumLi: function (model) {
                    // Makes AJAX to FB for getting cover art
                    var that = this;
                    $.ajax({
                        url: "https://graph.facebook.com/" + model.get('cover_photo'),
                        dataType: "json",
                        success: function(data, textStatus, jqXHR) {
                            // Add album and cover to the DOM
                            $("#albums-list").append("<li><a href=\"#\" id=\""+ model.get('id') +
                                "\" class=\"album-names\"><img src=\""+ data['picture'] +
                                "\"/><br>"+ model.get('name') +"</a></li>");
                            $("#"+ model.get("id") ).click(add_photos);
                        }
                    });
                }
            });
            // AppView is the main backbone object, holds the methods and collections
            var appview = new AppView;
            function add_photos() {
                // Makes AJAX call to FB to get all photos in an album 
                // First remove any old pics from previous clicks
                $("#friends-list").empty();
                $.ajax({
                    url: "https://graph.facebook.com/" + this.id + "/photos", 
                    dataType: "json",
                    success: function (data, textStatus, jqXHR) {
                        // Iterate thru photos and add to collection
                        $.each(data['data'], function(index, value) {
                            appview.photos.add(new Photo(value));
                        });
                    }
                });
            }
        })(jQuery);
        </script>
    </body>
 </html>
	<!DOCTYPE html>

	<html>
	<head>
	<title>Backbone with Mighty Moo Photos</title>
	</head>
	<body>
	<ul id="albums-list">
	</ul>
	<ul id="friends-list">
	</ul>
	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
	<script src="http://ajax.cdnjs.com/ajax/libs/underscore.js/1.1.4/underscore-min.js"></script>
	<script src="http://ajax.cdnjs.com/ajax/libs/backbone.js/0.3.3/backbone-min.js"></script>
	<script type="text/javascript">
	(function ($) {

	Album = Backbone.Model.extend({
	id: null,
	cover_photo: null,
	name: null,
	created_time: null
	});
	Photo = Backbone.Model.extend({
	source: null,
	name: null
	});

	Albums = Backbone.Collection.extend({
	initialize: function(models, options) {
	// Just binds a listener for when a new photo is added to the collection
	this.bind("add", options.view.addAlbumLi);
	}
	});
	Photos = Backbone.Collection.extend({
	initialize: function(models, options) {
	// Just binds a listener for when a new photo is added to the collection
	this.bind("add", options.view.addPhotoLi);
	}
	});

	window.AppView = Backbone.View.extend({
	el: $("body"),
	initialize: function () {
	// Initializes the albums and photos collections
	this.albums = new Albums(null, {view: this});
	this.photos = new Photos(null, {view: this});
	var that = this;
	$.ajax({ url: "https://graph.facebook.com/203771702995922/albums/",
	// AJAX to FB for getting MightyMoo albums
	dataType: "json",
	success: function (data, textStatus, jqXHR) {
	$.each(data['data'], function(index, value) {
	// Album object has subset of tag names from FB response
	var album = new Album(value);
	that.albums.add(album);
	});
	}
	});
	},
	events: {
	"click #album-names": "showAlbum" // binds click handler for albums
	},
	addPhotoLi: function (model) {
	// Adds small photo to DOM
	$("#friends-list").append("<img src=\""+ model.get('source') +"\" />");
	},
	addAlbumLi: function (model) {
	// Makes AJAX to FB for getting cover art
	var that = this;
	$.ajax({
	url: "https://graph.facebook.com/" + model.get('cover_photo'),
	dataType: "json",
	success: function(data, textStatus, jqXHR) {
	// Add album and cover to the DOM
	$("#albums-list").append("<li><a href=\"#\" id=\""+ model.get('id') +
	"\" class=\"album-names\"><img src=\""+ data['picture'] +
	"\"/><br>"+ model.get('name') +"</a></li>");
	$("#"+ model.get("id") ).click(add_photos);
	}
	});
	}
	});
	// AppView is the main backbone object, holds the methods and collections
	var appview = new AppView;
	function add_photos() {
	// Makes AJAX call to FB to get all photos in an album
	// First remove any old pics from previous clicks
	$("#friends-list").empty();
	$.ajax({
	url: "https://graph.facebook.com/" + this.id + "/photos",
	dataType: "json",
	success: function (data, textStatus, jqXHR) {
	// Iterate thru photos and add to collection
	$.each(data['data'], function(index, value) {
	appview.photos.add(new Photo(value));
	});
	}
	});
	}
	})(jQuery);
	</script>
	</body>
	</html>