finaiized/code.js

## code.js
$(document).ready(function() {
   var Meal = Backbone.Model.extend({
      defaults: {
         "appetizer": "Caesar Salad",
         "entree": "Ravioli",
         "dessert": "Cheesecake"
      }
   });

   var Meals = Backbone.Collection.extend({
      model: Meal
   });

   var Menu = Backbone.View.extend({
      el: $('body'),
      events: {
         'click button#add': 'addMeal'
      },
      template: _.template($("#template-menu").html()),
      initialize: function() {
         _.bindAll(this, 'render', 'addMeal');
         this.collection = new Meals();
         this.collection.add(new Meal());
         this.collection.add(new Meal({
            'appetizer': 'Poop'
         }));
         this.collection.bind('add', this.render);
         this.render();
      },
      render: function() {
         var html = this.template({
            meals: this.collection.toJSON()
         });
         $('ol', this.el).html(html);

      },

      addMeal: function() {
         console.log("Added meal");
         this.collection.add(new Meal({'appetizer' : $('#appetizer').val() || "None"}));
      }
   });

   var menus = new Menu();

});

## index.html
<!DOCTYPE html>
<html>

   <head>
      <script src="jquery-1.7.2.min.js"></script>
      <script src="underscore-min.js"></script>
      <script src="backbone-min.js"></script>
      <script src="json2.js"></script>
      <script src="code.js"></script>
      <meta charset=utf-8 />
      <title>JS Bin</title>
      <!--[if IE]>
         <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
      <![endif]-->
      <style>
         article, aside, figure, footer, header, hgroup, menu, nav, section {
            display: block;
         }
      </style>
   </head>

   <body>
      <h1> Menu </h1>
        <button id="add">Add meal</button>
        <input type="text" id="appetizer">
        <ol>        </ol >
      <script type="text/html" id="template-menu">

          <% _.each(meals, function (meal) { %> <li> Appetizer: <%= meal.appetizer %> ,
            Entree: <%= meal.entree %> ,
            Dessert: <%= meal.dessert %> </li>
          <% }); %>

      </script>
   </body>

</html>
	$(document).ready(function() {
	var Meal = Backbone.Model.extend({
	defaults: {
	"appetizer": "Caesar Salad",
	"entree": "Ravioli",
	"dessert": "Cheesecake"
	}
	});

	var Meals = Backbone.Collection.extend({
	model: Meal
	});

	var Menu = Backbone.View.extend({
	el: $('body'),
	events: {
	'click button#add': 'addMeal'
	},
	template: _.template($("#template-menu").html()),
	initialize: function() {
	_.bindAll(this, 'render', 'addMeal');
	this.collection = new Meals();
	this.collection.add(new Meal());
	this.collection.add(new Meal({
	'appetizer': 'Poop'
	}));
	this.collection.bind('add', this.render);
	this.render();
	},
	render: function() {
	var html = this.template({
	meals: this.collection.toJSON()
	});
	$('ol', this.el).html(html);

	},

	addMeal: function() {
	console.log("Added meal");
	this.collection.add(new Meal({'appetizer' : $('#appetizer').val() \|\| "None"}));
	}
	});

	var menus = new Menu();

	});
	<!DOCTYPE html>
	<html>

	<head>
	<script src="jquery-1.7.2.min.js"></script>
	<script src="underscore-min.js"></script>
	<script src="backbone-min.js"></script>
	<script src="json2.js"></script>
	<script src="code.js"></script>
	<meta charset=utf-8 />
	<title>JS Bin</title>
	<!--[if IE]>
	<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
	<![endif]-->
	<style>
	article, aside, figure, footer, header, hgroup, menu, nav, section {
	display: block;
	}
	</style>
	</head>

	<body>
	<h1> Menu </h1>
	<button id="add">Add meal</button>
	<input type="text" id="appetizer">
	<ol> </ol >
	<script type="text/html" id="template-menu">

	<% _.each(meals, function (meal) { %> <li> Appetizer: <%= meal.appetizer %> ,
	Entree: <%= meal.entree %> ,
	Dessert: <%= meal.dessert %> </li>
	<% }); %>

	</script>
	</body>

	</html>