Commits

Scott Nixon  committed 6765fac

The site now displays the recipe details when it is clicked on.

  • Participants
  • Parent commits 4c9c0f9

Comments (0)

Files changed (2)

     <script src="js/vendor/backbone.js"></script>
     <script src="js/recipe_app.js"></script>
 
-    <script type="text/template" id="library-template">
-      <h1>Recipe Details</h1>
-      <ul class="albums"></ul>
+    <script type="text/template" id="recipepane-template">
+      <div id="scott" class='detail-box'>
+	<h1>Recipe Details</h1>
+      </div>
     </script>
 
+    <script type="text/template" id="recipedetail1-template">
+      <h1>Recipe Name</h1>
+      <p>description: Some here.</p>
+
+    </script>
+
+    <script type="text/template" id="recipedetail-template">
+	<h1><%= recipe_name %></h1>
+	<p>description: <%= recipe_description %></p>
+    </script>
+    <!--
+      <ul class="ingredients">
+        <% _.each(ingredients, function(ingredient) { %>
+          <li><%= ingredient.title %></li>
+        <% }); %>
+      </ul>
+      -->
+
+
     <script type="text/template" id="recipelist-template">
       <h1>Recipe List</h1>
       <ul class="recipes">
       <li class="recipe-title"><%= recipe_name %></li>
     </script>
 
-    <script type="text/template" id="recipedetail-template">
-      <h1><%= recipe_name %></h1>
-      <p>description: </p>
-      <ul class="ingredients">
-        <% _.each(ingredients, function(ingredient) { %>
-          <li><%= ingredient.title %></li>
-        <% }); %>
-      </ul>
-
-    </script>
 
     <script type="text/template" id="album-template">
       <button class="queue add"><img src="images/add.png"></button>
   <body>
     <div id="container">
       
-      <div id="right-pane">
-      </div>
     </div>
+
+    <div id="right-pane">
+
+    </div>
+
   </body>
 </html>

File js/recipe_app.js

                 var $recipes,
                 collection = this.collection;
 
-                $(this.el).html(this.template({}));
-                $recipes = this.$(".recipes"); /* scopes to current element */
+                $(this.el).html(this.template({})); // This render the View's template
+		/* Scopes to current element so that we can then add a new li 
+		   for each recipe. 
+		*/
+                $recipes = this.$(".recipes"); 
                 this.collection.each(function(recipe) {
 		    /* Applies the View inside of this function and then appends
 		       the result. 
 	    },
 
 	    initialize: function() {
-                _.bindAll(this, 'render');
+                _.bindAll(this, 'render', 'showRecipe');
             },
 
 	    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');
+
+                var view = new RecipeDetailView({
+                    model: this.model,
+                    collection: this.collection
+                });
+		//$("#container").append("<div id='recipedetail'></div>");
+		$(this.el).append(view.render().el);
+
+		// window.library.get(id=7)
 		return this;
 	    },
 
                 return this;
             }
 	});
-	
+
+	window.RecipePaneView = Backbone.View.extend({
+            template: _.template($("#recipepane-template").html()),
+            className: 'recipepane',
+	    tag: 'div',
+
+	    initialize: function() {
+                _.bindAll(this, 'render');
+		this.collection.bind('reset', this.render);
+		//this.collection.bind('click', this.render);
+            },
+
+	    render: function() {
+		var $details,
+		collection = this.collection;
+
+		//console.log(this.el);
+                //$("#container").append(this.template({}));	
+
+		//$details = this.$("#scott");
+		var view = new RecipePaneView({
+		    model: this.model,
+		    collection: collection
+		});
+		$(this.el).html(view.render().el);
+		return this;
+	    }
+
+	});
+
+
 	window.RecipeDetailView = Backbone.View.extend({
 	    template: _.template($("#recipedetail-template").html()),
-	    className: "detail-panel"
-	    
+	    className: "detail-panel",
+	    tag: 'div',
+
+	    initialize: function() {
+                _.bindAll(this, 'render');
+		this.collection.bind('reset', this.render);
+		/* The 'click' event must be in the init so that when the 
+		   related event fires it executes the render method.
+		 */
+		this.collection.bind('click', this.render);
+
+		collection = this.collection;
+		var view = new RecipePaneView({
+		    model: this.model,
+		    collection: collection
+		});
+
+            },
+
+            render: function() {
+		console.log(this.el);
+		$("#right-pane").empty();
+                $("#right-pane").html(this.template(this.model.toJSON()));
+                return this;
+            }
 	});