Scott Nixon avatar Scott Nixon committed f3082f5

Made some progress towards routing and a shopping list view.

Comments (0)

Files changed (3)

     <script src="js/vendor/underscore.js"></script>
     <script src="js/vendor/backbone.js"></script>
     <script src="js/recipe_app.js"></script>
-    <script src="js/vendor/jquery.mobile-1.0.min.js"></script> 
+    <!-- <script src="js/vendor/jquery.mobile-1.0.min.js"></script> -->
 
     <script type="text/template" id="recipepane-template">
       <div id="scott" class='detail-box'>
       <p><%= recipe_description %></p>
     </script>
 
+    <script type="text/template" id="shoplist-template">
+      <ul></ul>
+    </script>
+
+
+    <script type="text/template" id="shoplistitem-template">
+      <%= recipe_name %>
+    </script>
+
 
     <script type="application/javascript">
       jQuery(function() {
     <style>
       #container {
           width: 30%;
+          float: left;
           
       }
       #details-pane {
           top:0;
           right:0;
-          position:fixed;
+          float: right;
           width: 70%
       }
     </style>
 
 	<div id="details-pane">
 	  <h1>Welcome to Happy Herbivore's Recipes!</h1>
+	  <p><a href="#shopping_list" class="shoppinglist">Shopping List</a></p>
+	  <p><a href="#blank" class="shoppinglist">Blank</a></p>
 	  <p>Join us on <a href="https://www.facebook.com/HappyHerbivoreBlog">Facebook</a></p>
 	  <p>Follow <a href="">Lindsay</a> on Twitter</p>
 	  <p>Ask Questions on <a href="https://www.facebook.com/HappyHerbivoreBlog">Facebook</a></p>
 (function($) {
 
+var HHShop = {
+    view: {},
+    model: {},
+    collection: {},
+};
+
 /* ALBUM MODEL */
-    window.Recipe = Backbone.Model.extend({
-
-
-    });
+    window.Recipe = Backbone.Model.extend({});
+    HHShop.model.ShoppingList = Backbone.Model.extend({});
 
 /* ALBUMS COLLECTION */
     window.Recipes = Backbone.Collection.extend({
         model: Recipe,
         url: "recipes.json"
     });
+    
+    HHShop.collection.ShoppingLists = Backbone.Collection.extend({
+	model: HHShop.model.ShoppingList
+    });
 
     //rec = new window.Recipes();
     //window.stuff = rec.fetch();
 
     window.library = new Recipes();
+    HHShop.shoppingList = new HHShop.collection.ShoppingLists();
 
 
     $(document).ready(function() {
             tag: 'li',
             className: 'recipelibrary',
 
+	    events: {
+		'click a.shoppinglist': 'shoplist'
+	    },
+
             initialize: function() {
-                _.bindAll(this, 'render');
+                _.bindAll(this, 'render', 'shoplist');
 		/* The reset event calls the render method that fetches the 
 		   data and allows it to be displayed.
 		 */
 		this.collection.bind('reset', this.render);
+		//this.collectoin.bind('click', 'shoplist');
+		this.router = this.options.router;
+		console.log(this.router);
             },
+	    
+	    shoplist: function() {
+		console.log('click and funcition fired')
+		this.router.routes("shopping_list", true);
+	    },
 
             render: function() {
                 var $recipes,
 
 	    initialize: function() {
                 _.bindAll(this, 'render', 'showRecipe');
+		this.router = this.options.router;
             },
 
-	    showRecipe: function() {
+	    showRecipe: function(id) {
 		/* This can probably be done by creating a function that calls 
 		   another view as it is done above with the render method.
 		 */
                 });
 		//$("#container").append("<div id='recipedetail'></div>");
 		$(this.el).append(view.render().el);
+		console.log( "Get post number " + this.model.id);
+		this.router.navigate("recipe/"+ this.model.id, true);
 
 		// window.library.get(id=7)
 		return this;
             }
 	});
 
+	HHShop.view.ShoppingList = Backbone.View.extend({
+	    el: '#details-pane',
+	    template: _.template($("#shoplist-template").html()),
+	    
+	    initialize: function () {
+		console.log('load ShoppingList');
+
+
+
+		_.bindAll(this, 'render');
+		this.collection.bind('reset', this.render);
+		
+		var view = new HHShop.view.ShopListItem({
+		    model: this.model,
+		    collection: this.collection
+		})
+	    },
+
+	    render: function() {
+		$("#details-pane").empty();
+		$("#details-pane").html(this.template(this.model.toJSON()));
+		return this;
+	    }
+	});	
+
+	HHShop.view.ShopListItem = Backbone.View.extend({
+	    template: _.template($("#shoplistitem-template").html()),
+	    tag: 'li',
+
+	    initialize: function()  {
+		_.bindAll(this, 'render');
+	    }, 
+	    
+	    render: function() {
+		$(this.el).html("<p>All your base</p>");
+		console.log("ShoppingList");
+	    }
+	});
+	
+
 
 /***** ROUTER ******/
 
-        window.BackboneRecipes = Backbone.Router.extend({
+        HHShop.recipesRouter = Backbone.Router.extend({
             routes: {
                 '': 'home',
                 'blank': 'blank',
-		'recipe/:id': 'blank'
+		'recipe/:id': 'blank',
+		'shopping_list': 'shoppinglist'
             },
 
 	    initialize: function () {
 		   
 		*/
 		this.recipeLibraryView = new RecipeLibraryView({
+		    router: this,
 		    collection: window.library
 		});
+		this.shoppingListView = new HHShop.view.ShoppingList({
+		    router: this,
+		    collection: HHShop.shoppingList
+		});
 	    },
 
             home: function() {
                 $('#container').empty();
                 $("#container").append(this.recipeLibraryView.render().el);
             },
+	    
+	    shoppinglist: function() {
+		$('#details-pane').empty();
+		$('#details-pane').append(this.shoppingListView.render.el);
+	    },
 
             blank: function() {
                 $('#container').empty();
         });
 
         // Kick off the application
-        window.App = new BackboneRecipes();
-        Backbone.history.start({pushState: true});
+        window.App = new HHShop.recipesRouter();
+        Backbone.history.start();
     });
 
 })(jQuery);

js/recipe_namespaced.js

+var HHShop = {
+    view: {},
+    model: {},
+    collection: {},
+    start: function() {
+        new HHShop.RecipesRouter();
+    }
+};
+
+/* ALBUM MODEL */
+HHShop.model.Recipe = Backbone.Model.extend({});
+
+
+/*
+  If you are binding to a Collection this.collection.bind("click", this.callback) then
+  the context of the 'this' in the callback function is "collection context". 
+  Using this.collection.bind("click", this.callback, this) will give it the context of
+  the view.
+*/
+
+/* ALBUMS COLLECTION */
+HHShop.collection.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: HHShop.model.Recipe,
+    url: "recipes.json"
+});
+
+//rec = new HHShop.collection.Recipes();
+//window.stuff = rec.fetch();
+HHShop.library = new HHShop.collection.Recipes();
+
+
+
+/* RecipeLibrary view is the main view for creating the list
+       of recipe names.
+     */
+console.log("here");
+HHShop.view.RecipeLibraryView = Backbone.View.extend({
+    el: '#container',
+    template: _.template($("#recipelist-template").html()),
+    tag: 'li',
+    className: 'recipelibrary',
+
+    initialize: function() {
+	console.log("inner");
+        _.bindAll(this, 'render');
+        this.collection.bind('reset', this.render);
+	/* When the reset event occurs the callback function this.render method 
+           fetches the data and allows it to be displayed.
+
+           When you bind an event it will automatically pass the model and collection 
+           to the callback function.
+         */
+    },
+
+    render: function() {
+        var $recipes, collection = this.collection;
+
+        $(this.el).html(this.template({})); // This renders 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. 
+             */
+            var view = new HHShop.view.RecipeListItemView({
+                model: recipe,
+                collection: collection
+            });
+            $recipes.append(view.render().el);
+        });
+        return this;
+
+    }
+});
+console.log("after");
+
+HHShop.view.RecipeListItemView = HHShop.view.RecipeLibraryView.extend({
+    template: _.template($("#recipeitem-template").html()),
+    tag: 'li',
+    className: 'recipes',
+
+    events: {
+        'click .recipe-title': 'showRecipe'
+    },
+
+    initialize: function() {
+        _.bindAll(this, 'render', 'showRecipe');
+    },
+
+    showRecipe: function() {
+/* This can probably be done by creating a function that calls 
+           another view as it is done above with the render method.
+         */
+
+        var view = new HHShop.view.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;
+    },
+
+
+    render: function() {
+        $(this.el).html(this.template(this.model.toJSON()));
+        return this;
+    }
+});
+
+HHShip.view.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;
+
+        var view = new HHShop.view.RecipePaneView({
+            model: this.model,
+            collection: collection
+        });
+        $(this.el).html(view.render().el);
+        return this;
+    }
+
+});
+
+
+HHShop.view.RecipeDetailView = Backbone.View.extend({
+    template: _.template($("#recipedetail-template").html()),
+    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 HHShop.view.RecipePaneView({
+            model: this.model,
+            collection: collection
+        });
+
+    },
+
+    render: function() {
+        $("#details-pane").empty();
+        $("#details-pane").html(this.template(this.model.toJSON()));
+        return this;
+    }
+});
+
+
+/***** ROUTER ******/
+
+HHShop.RecipesRouter = Backbone.Router.extend({
+    routes: {
+        '': 'home',
+        'blank': 'blank',
+        'recipe/:id': 'blank'
+    },
+
+    initialize: function() {
+	/* Should instaiate the root level view.  */
+	console.log("init Router");
+        this.recipeLibraryView = new HHShop.view.RecipeLibraryView({
+            collection: HHShop.library
+        });
+    },
+
+    home: function() {
+        $('#container').empty();
+        $("#container").append(this.recipeLibraryView.render().el);
+    },
+
+    blank: function() {
+        $('#container').empty();
+        $('#container').append("Hello World.");
+    }
+});
+
+$(document).ready(function() {
+    // Kick off the application
+    //window.App = new BackboneRecipes();
+    Backbone.history.start({
+        pushState: true
+    });
+});
Tip: Filter by directory path e.g. /media app.js to search for public/media/app.js.
Tip: Use camelCasing e.g. ProjME to search for ProjectModifiedEvent.java.
Tip: Filter by extension type e.g. /repo .js to search for all .js files in the /repo directory.
Tip: Separate your search with spaces e.g. /ssh pom.xml to search for src/ssh/pom.xml.
Tip: Use ↑ and ↓ arrow keys to navigate and return to view the file.
Tip: You can also navigate files with Ctrl+j (next) and Ctrl+k (previous) and view the file with Ctrl+o.
Tip: You can also navigate files with Alt+j (next) and Alt+k (previous) and view the file with Alt+o.