ZacharyDinerstein/app.js

## app.js

// ** Models **
var Monkey = Backbone.Model.extend({
	defaults: {
		joy: 0,
		bananas: 5
	},
	eatBanana: function(){
		this.attributes.joy += 1;
		this.attributes.bananas -= 1;
	}
});

var Aardvark = Backbone.Model.extend({
	defaults: {
		ants: 5,
	},
	eatAnt: function(){
		this.attributes.ants -= 1;
	}
});

var Goat = Backbone.Model.extend({
	defaults: {
		volume: 11,
	},
	scream: function(){
		alert("I'M A GOAT MUTHAFUCKA!!!!!!!!! YOU CAN'T STEP TO ME!")
	}
});


// ** Collections **										//Acts like a database for each model. Stores each instance of our models.
var MonkeyCollection = Backbone.Collection.extend({
	model: Monkey
});

var AardvarkCollection = Backbone.Collection.extend({
	model: Aardvark
});

var GoatCollection = Backbone.Collection.extend({
	model: Goat
});


// ** Views **
	var MonkeyView = Backbone.View.extend({
		tagName: 'li',
		template: _.template('<%= name %> ... the monkey. <button data-action="destroy">Free</button>'),
		initialize: function(){
			this.listenTo(this.model, 'remove', this.remove)
		},
		render: function(){
			// this.$el.html(this.template( this.model.toJSON() ))
			this.$el.html(this.template( this.model.attributes ))
			return this;
		},
		events: {
			'click [data-action="destroy"]' : 'destroy'
		},
		destroy: function(){
			this.model.destroy()
		}
	});

	var MonkeyListView =  Backbone.View.extend({
		initialize: function(){
			this.listenTo(this.collection, 'add', this.renderMonkey)
		},
		renderMonkey: function(monkey){
			monkey.view = new MonkeyView({ model: monkey });
			this.$('#monkey-list').prepend(monkey.view.render().el);
			// this.$el.find('#monkey-list').prepend(monkey.view.render().el);
		},
		events: {
			'submit form' : 'createMonkey'
		},
		createMonkey: function(e){
			e.preventDefault();
			var monkey_data = {
				name: this.$('form input').val()
			};
			this.collection.add(monkey_data)
		},
	});


// ** Declare global variables **
var monkey_collection, monkeys_view;

// ** Document Ready **
$(function(){

	monkey_collection = new MonkeyCollection();
	monkeys_view = new MonkeyListView({
		collection: monkey_collection,
		el: $('.monkeys')
	});

});


// //Three ways to set attributes
// demo_monk = new Monkey({name: 'bob'})
// demo_monk.set('name', 'bob')
// demo_monk.attributes.name =  'bob'


	// initialize: function(attrs){
	// 	if (attrs.name === ''){
	// 		this.set('name', 'Monkey')
	// 	}
	// },


	// renderALl:function(){
// 	_.each(this.collection.models, this.renderMonkey)
// }

## index.html
<html>
  <head>
    <title>Backbananas:  </title>
    <meta charset="utf-8">
    <link rel="stylesheet" href="stylesheets/styles.css">

    <script type="text/javascript" src='javascripts/libraries/jquery.js'></script>
    <script type="text/javascript" src='javascripts/libraries/underscore.js'></script>
    <script type="text/javascript" src='javascripts/libraries/backbone.js'></script>
  <script type="text/javascript" src='javascripts/app.js'></script>
  </head>

  <body>

    <div id='main' class='container'>

      <div class="monkeys">
        <form id="monkeyform">
          <input name="monkey-name" type="text" placeholder="Monkey Name">
          <button type="submit">Add To Zoo</button>
        </form>
        <ul id='monkey-list'></ul>
      </div>

      <div class="aardvark">
        <form id="aardvarkform">
          <input name="aardvark-name" type="text" placeholder="Aardvark Name">
          <button type="submit">Add To Zoo</button>
        </form>
        <ul id='aardvark-list'></ul>
      </div>

      <div class="goat">
        <form id="goatform">
          <input name="goat-name" type="text" placeholder="Goat Name">
          <button type="submit">Add To Zoo</button>
        </form>
        <ul id='goat-list'></ul>
      </div>

    </div>

  </body>

</html>

	// Models
	var Monkey = Backbone.Model.extend({
	defaults: {
	joy: 0,
	bananas: 5
	},
	eatBanana: function(){
	this.attributes.joy += 1;
	this.attributes.bananas -= 1;
	}
	});

	var Aardvark = Backbone.Model.extend({
	defaults: {
	ants: 5,
	},
	eatAnt: function(){
	this.attributes.ants -= 1;
	}
	});

	var Goat = Backbone.Model.extend({
	defaults: {
	volume: 11,
	},
	scream: function(){
	alert("I'M A GOAT MUTHAFUCKA!!!!!!!!! YOU CAN'T STEP TO ME!")
	}
	});


	// Collections //Acts like a database for each model. Stores each instance of our models.
	var MonkeyCollection = Backbone.Collection.extend({
	model: Monkey
	});

	var AardvarkCollection = Backbone.Collection.extend({
	model: Aardvark
	});

	var GoatCollection = Backbone.Collection.extend({
	model: Goat
	});


	// Views
	var MonkeyView = Backbone.View.extend({
	tagName: 'li',
	template: _.template('<%= name %> ... the monkey. <button data-action="destroy">Free</button>'),
	initialize: function(){
	this.listenTo(this.model, 'remove', this.remove)
	},
	render: function(){
	// this.$el.html(this.template( this.model.toJSON() ))
	this.$el.html(this.template( this.model.attributes ))
	return this;
	},
	events: {
	'click [data-action="destroy"]' : 'destroy'
	},
	destroy: function(){
	this.model.destroy()
	}
	});

	var MonkeyListView = Backbone.View.extend({
	initialize: function(){
	this.listenTo(this.collection, 'add', this.renderMonkey)
	},
	renderMonkey: function(monkey){
	monkey.view = new MonkeyView({ model: monkey });
	this.$('#monkey-list').prepend(monkey.view.render().el);
	// this.$el.find('#monkey-list').prepend(monkey.view.render().el);
	},
	events: {
	'submit form' : 'createMonkey'
	},
	createMonkey: function(e){
	e.preventDefault();
	var monkey_data = {
	name: this.$('form input').val()
	};
	this.collection.add(monkey_data)
	},
	});


	// Declare global variables
	var monkey_collection, monkeys_view;

	// Document Ready
	$(function(){

	monkey_collection = new MonkeyCollection();
	monkeys_view = new MonkeyListView({
	collection: monkey_collection,
	el: $('.monkeys')
	});

	});








	// //Three ways to set attributes
	// demo_monk = new Monkey({name: 'bob'})
	// demo_monk.set('name', 'bob')
	// demo_monk.attributes.name = 'bob'






	// initialize: function(attrs){
	// if (attrs.name === ''){
	// this.set('name', 'Monkey')
	// }
	// },







	// renderALl:function(){
	// _.each(this.collection.models, this.renderMonkey)
	// }
	<html>
	<head>
	<title>Backbananas: </title>
	<meta charset="utf-8">
	<link rel="stylesheet" href="stylesheets/styles.css">

	<script type="text/javascript" src='javascripts/libraries/jquery.js'></script>
	<script type="text/javascript" src='javascripts/libraries/underscore.js'></script>
	<script type="text/javascript" src='javascripts/libraries/backbone.js'></script>
	<script type="text/javascript" src='javascripts/app.js'></script>
	</head>

	<body>

	<div id='main' class='container'>

	<div class="monkeys">
	<form id="monkeyform">
	<input name="monkey-name" type="text" placeholder="Monkey Name">
	<button type="submit">Add To Zoo</button>
	</form>
	<ul id='monkey-list'></ul>
	</div>

	<div class="aardvark">
	<form id="aardvarkform">
	<input name="aardvark-name" type="text" placeholder="Aardvark Name">
	<button type="submit">Add To Zoo</button>
	</form>
	<ul id='aardvark-list'></ul>
	</div>

	<div class="goat">
	<form id="goatform">
	<input name="goat-name" type="text" placeholder="Goat Name">
	<button type="submit">Add To Zoo</button>
	</form>
	<ul id='goat-list'></ul>
	</div>

	</div>

	</body>

	</html>