views.js

"use strict";


// Individual Thumbnail View - many many instances
App.Views.ThumbView = Backbone.View.extend({
	template: _.template($(".thumb-view-template").text()),

	className: "thumb-container",

	initialize: function () {
		$(".container").append(this.el);
		this.render();
	},

	render: function () {
		var renderedTemplate = this.template(this.model.attributes);
		this.$el.html(renderedTemplate);
	}
});



// Full App View // only 1 instance
App.Views.SiteView = Backbone.View.extend({

	initialize: function () {
		this.collection = new App.Collections.PhotoCollection()
		this.collection.fetch()
		this.listenTo(this.collection, "add", function (photo) {
			new App.Views.ThumbView({model: photo});
		});

	},

})


$('.add-button').click(function () {

	var userURL = $('.url-input').val();
	var userProvideName = $('.name-input').val();

	var photo = App.Models.Photo();
	photo.set({
		url:userURL,
		photoName: userProvideName 
	});

	mySite.collection.add(photo);
	photo.save();

})


// // mySite = App.Views.SiteView()

















// var array = [1,2,3]
// array.push(model) // fires an "add" event. also sends what was added



// // mySite.collection