Commits

Scott Nixon  committed 4c9c0f9

Adding documentation and notes.

  • Participants
  • Parent commits 24e4005

Comments (0)

Files changed (2)

       </ul>
     </script>
 
-    <script type="text/template" id="recipe-template">
-      <h1><%= recipe_name %></h1>
-      <p>description: </p>
-
+    <script type="text/template" id="recipeitem-template">
+      <li class="recipe-title"><%= recipe_name %></li>
     </script>
 
-    <script type="text/template" id="recipe2-template">
+    <script type="text/template" id="recipedetail-template">
       <h1><%= recipe_name %></h1>
       <p>description: </p>
       <ul class="ingredients">
     <script type="text/template" id="album-template">
       <button class="queue add"><img src="images/add.png"></button>
       <button class="queue remove"><img src="images/remove.png"></button>
-      <span class="album-title"><%= recipe_name %></span><!--title -->&nbsp;&nbsp;
-      <span class="artist-name"><%= recipe_description %></span><!--artist -->
+      <span class="album-title"><%= recipe_name %></span>&nbsp;&nbsp;
+      <span class="artist-name"><%= recipe_description %></span>
       <ol class="ingredients">
         <% _.each(ingredients, function(ingredient) { %>
           <li><%= ingredient.title %></li>
     <script type="text/template" id="list-template">
       <button class="queue add"><img src="images/add.png"></button>
       <button class="queue remove"><img src="images/remove.png"></button>
-      <span class="album-title"><%= recipe_name %></span><!--title -->&nbsp;&nbsp;
+      <span class="album-title"><%= recipe_name %></span>&nbsp;&nbsp;
+    </script>
+
+    <script type="text/template" id="recipedetail-template">
+      <h2><%= recipe_name %></h2>
+      <p><%= recipe_description %></p>
     </script>
 
 
       });
     </script>
 
+    <style>
+      .detail-panel {
+          float:right;
+      }
+    </style>
+
   </head>
 
   <body>
     <div id="container">
+      
+      <div id="right-pane">
+      </div>
     </div>
   </body>
 </html>

File js/recipe_app.js

 
 /* ALBUMS COLLECTION */
     window.Recipes = Backbone.Collection.extend({
+	/* Set the url that we can later fetch the json data. 
+	   It is currently done on the onload event in the html.
+	 */
         model: Recipe,
         url: "recipes.json"
     });
 
-    rec = new window.Recipes();
+    //rec = new window.Recipes();
     //window.stuff = rec.fetch();
 
     window.library = new Recipes();
 
     $(document).ready(function() {
 
-/* ALBUM VIEW */
-        window.RecipeView = Backbone.View.extend({
+	/* RecipeLibrary view is the main view for creating the list
+	   of recipe names.
+	 */
+        window.RecipeLibraryView = Backbone.View.extend({
             template: _.template($("#recipelist-template").html()),
             tag: 'li',
-            className: 'album',
+            className: 'recipelibrary',
 
             initialize: function() {
                 _.bindAll(this, 'render');
+		/* The reset event calls the render method that fetches the 
+		   data and allows it to be displayed.
+		 */
 		this.collection.bind('reset', this.render);
             },
 
                 collection = this.collection;
 
                 $(this.el).html(this.template({}));
-                $recipes = this.$(".recipes"); //scopes to current element
+                $recipes = this.$(".recipes"); /* scopes to current element */
                 this.collection.each(function(recipe) {
-		    console.log(recipe);
-                    var view = new LibraryRecipeView({
+		    /* Applies the View inside of this function and then appends
+		       the result. 
+		     */
+                    var view = new RecipeListItemView({
                         model: recipe,
                         collection: collection
                     });
             }
         });
 
-	window.LibraryRecipeView = RecipeView.extend({
-	    template: _.template($("#recipe-template").html()),
+	window.RecipeListItemView = RecipeLibraryView.extend({
+	    template: _.template($("#recipeitem-template").html()),
             tag: 'li',
-            className: 'album',
+            className: 'recipes',
+
+            events: {
+		'click .recipe-title': 'showRecipe'
+	    },
 
 	    initialize: function() {
                 _.bindAll(this, 'render');
             },
 
+	    showRecipe: function() {
+		//$(".library").empty();
+		$(this.el).attr("style", "background: #ccc;");
+		/* This can probably be done by creating a function that calls 
+		   another view as it is done above with the render method.
+		 */
+		$("#right-pane").append("<h1>Hello</p>");
+		//.append(this.template.render().el);
+		console.log('showRecipe');
+		return this;
+	    },
+
+
             render: function() {
                 $(this.el).html(this.template(this.model.toJSON()));
                 return this;
             }
 	});
+	
+	window.RecipeDetailView = Backbone.View.extend({
+	    template: _.template($("#recipedetail-template").html()),
+	    className: "detail-panel"
+	    
+	});
 
 
 /* LIBRARY VIEW */
 	    template: _.template($('#recipe-template').html()),
 
             events: {
-		'click .album-title': 'showRecipe'
+		'click .recipe-title': 'showRecipe'
 	    },
 
 	    initialize: function() {
 	    }
 
 	});
+*/
 
 
 /***** ROUTER ******/
             },
 
 	    initialize: function () {
-		//Should instaiate the root level view.
-		this.recipeView = new RecipeView({
+		/* Should instaiate the root level view.
+		   
+		*/
+		this.recipeLibraryView = new RecipeLibraryView({
 		    collection: window.library
 		});
 	    },
 
             home: function() {
                 $('#container').empty();
-                $("#container").append(this.recipeView.render().el);
+                $("#container").append(this.recipeLibraryView.render().el);
             },
 
             blank: function() {