Finishing up sample

jcreamer898 · Mar 20, 2013 · ea0c83e · ea0c83e
1 parent c4d92c1
commit ea0c83e
Show file tree

Hide file tree

Showing 12 changed files with 123 additions and 26 deletions.
diff --git a/build.json b/build.json
@@ -9,7 +9,10 @@
         }
     },
     "httpPaths": {
-    	"/": "./lib"
+    	"/": "./lib",
+        "/spec": "./spec",
+        "/spec/js": "./lib/js",
+        "/spec/lib": "./lib"
     },
     "anvil.compass": {
         "config_file": "compass.rb"

diff --git a/lib/css/styles.css b/lib/css/styles.css
@@ -69,3 +69,20 @@ a img {
 article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary {
   display: block;
 }
+
+@media -sass-debug-info{filename{font-family:file\:\/\/C\:\/Users\/Jonathan\/gitrepos\/Blogs\/NetTuts\/NetTutsKnockout\/\.anvil\/tmp\/sass\/styles\.scss}line{font-family:\000034}}
+body {
+  font-family: verdana;
+}
+
+@media -sass-debug-info{filename{font-family:file\:\/\/C\:\/Users\/Jonathan\/gitrepos\/Blogs\/NetTuts\/NetTutsKnockout\/\.anvil\/tmp\/sass\/styles\.scss}line{font-family:\000036}}
+#main {
+  width: 50%;
+  margin: 0 auto;
+  font-size: .9em;
+}
+@media -sass-debug-info{filename{font-family:file\:\/\/C\:\/Users\/Jonathan\/gitrepos\/Blogs\/NetTuts\/NetTutsKnockout\/\.anvil\/tmp\/sass\/styles\.scss}line{font-family:\0000311}}
+#main .search, #main .favorites {
+  width: 50%;
+  float: left;
+}
diff --git a/lib/index.html b/lib/index.html
@@ -8,21 +8,34 @@
     <link rel="stylesheet" href="css/styles.css">
 </head>
 <body>
-	<input type="text" name="search" placeholder="Search" data-bind="value: search" />
-	<ul data-bind="foreach: beerListFiltered">
-		<li data-bind="text: name"></li>
-	</ul>
+    <section id="main">
+        <section id="container">
+            <form class="search" data-bind="submit: doSearch">
+                <input type="text" name="search" placeholder="Search" data-bind="value: search, valueUpdate: 'afterkeydown'" />
+                <ul data-bind="foreach: beerListFiltered">
+                    <li data-bind="text: name, click: $parent.addToFavorites"></li>
+                </ul>
+            </form>
 
-	<!-- import("templates/list.html") -->
+            <aside id="favorites">
+                <h3>Favorites</h3>
+                <ul data-bind="foreach: favorites">
+                    <li data-bind="text: name, click: $parent.removeFromFavorites"></li>
+                </ul>
+            </aside>
+        </section>
+    </section>
 
-	<script src="js/require-jquery.js"></script>
-	<script>
-		require( [ "./js/common" ], function (common) {
+    <!-- import("templates/list.html") -->
+
+    <script src="js/require-jquery.js"></script>
+    <script>
+        require( [ "./js/common" ], function (common) {
             //js/common sets the baseUrl to be js/ so
             //can just ask for 'app/main1' here instead
             //of 'js/app/main1'
             require( [ "pages/index" ] );
         });
-	</script>
+    </script>
 </body>
 </html>
diff --git a/lib/js/data/amplifyResources.js b/lib/js/data/amplifyResources.js
diff --git a/lib/js/viewModels/indexViewModel.js b/lib/js/viewModels/indexViewModel.js
@@ -8,9 +8,12 @@ define( [
 
     var IndexViewModel = function() {
         this.beers = [];
+        this.favorites = [];
         this.search = "";
 
         BaseViewModel.apply( this, arguments );
+
+        _.bindAll( this, "addToFavorites", "removeFromFavorites" );
     };
 
     _.extend(IndexViewModel.prototype, BaseViewModel.prototype, {
@@ -49,8 +52,20 @@ define( [
             var self = this;
 
             bus.data.subscribe( "beers.fetched", function( data ) {
-                self.parse.call( self, _.sortBy( data.beers, "name" ) );
+                self.parse.call( self, _.sortBy( data.data, "name" ) );
             });
+        },
+
+        addToFavorites: function( beer ) {
+            this.favorites.push( beer );
+        },
+
+        removeFromFavorites: function( beer ) {
+            this.favorites.remove( beer );
+        },
+
+        doSearch: function() {
+            return false;
         }
     });
 

diff --git a/spec/fixtures/beersdb.json b/spec/fixtures/beersdb.json
diff --git a/spec/index.html b/spec/index.html
@@ -9,16 +9,15 @@
 
     <script src="mocha/expect.js"></script>
     <script src="mocha/mocha.js"></script>
-    <script src="/testem.js"></script>
     <script src="mocha/sinon-1.5.2.js"></script>
 
 
-    <script src="../lib/js/require-jquery.js"></script>
+    <script src="js/require-jquery.js"></script>
 
     <script>
         mocha.setup( "bdd" );
 
-        require( [ "../lib/js/common" ], function() {
+        require( [ "js/common" ], function() {
             require( [
                 "./tests/baseViewModel.spec.js",
                 "./tests/resources.spec.js",

diff --git a/spec/tests/indexViewModel.spec.js b/spec/tests/indexViewModel.spec.js
@@ -39,5 +39,16 @@ define( [ "underscore", "viewModels/indexViewModel", "models/beer", "postal" ],
 
             expect( this.viewModel.beers().length ).to.be( 3 );
         });
+
+        it( "should add new beers to favorites", function() {
+            expect( this.viewModel.favorites().length ).to.be( 0 );
+
+            this.viewModel.addToFavorites( new Beer({
+                name: "abita amber",
+                id: 3
+            }));
+
+            expect( this.viewModel.favorites().length ).to.be( 1 );
+        });
     });
 });
diff --git a/src/index.html b/src/index.html
@@ -8,21 +8,34 @@
     <link rel="stylesheet" href="css/styles.css">
 </head>
 <body>
-	<input type="text" name="search" placeholder="Search" data-bind="value: search" />
-	<ul data-bind="foreach: beerListFiltered">
-		<li data-bind="text: name"></li>
-	</ul>
+    <section id="main">
+        <section id="container">
+            <form class="search" data-bind="submit: doSearch">
+                <input type="text" name="search" placeholder="Search" data-bind="value: search, valueUpdate: 'afterkeydown'" />
+                <ul data-bind="foreach: beerListFiltered">
+                    <li data-bind="text: name, click: $parent.addToFavorites"></li>
+                </ul>
+            </form>
 
-	<!-- import("templates/list.html") -->
+            <aside id="favorites">
+                <h3>Favorites</h3>
+                <ul data-bind="foreach: favorites">
+                    <li data-bind="text: name, click: $parent.removeFromFavorites"></li>
+                </ul>
+            </aside>
+        </section>
+    </section>
 
-	<script src="js/require-jquery.js"></script>
-	<script>
-		require( [ "./js/common" ], function (common) {
+    <!-- import("templates/list.html") -->
+
+    <script src="js/require-jquery.js"></script>
+    <script>
+        require( [ "./js/common" ], function (common) {
             //js/common sets the baseUrl to be js/ so
             //can just ask for 'app/main1' here instead
             //of 'js/app/main1'
             require( [ "pages/index" ] );
         });
-	</script>
+    </script>
 </body>
 </html>
diff --git a/src/js/data/amplifyResources.js b/src/js/data/amplifyResources.js
diff --git a/src/js/viewModels/indexViewModel.js b/src/js/viewModels/indexViewModel.js
@@ -8,9 +8,12 @@ define( [
 
     var IndexViewModel = function() {
         this.beers = [];
+        this.favorites = [];
         this.search = "";
 
         BaseViewModel.apply( this, arguments );
+
+        _.bindAll( this, "addToFavorites", "removeFromFavorites" );
     };
 
     _.extend(IndexViewModel.prototype, BaseViewModel.prototype, {
@@ -49,8 +52,20 @@ define( [
             var self = this;
 
             bus.data.subscribe( "beers.fetched", function( data ) {
-                self.parse.call( self, _.sortBy( data.beers, "name" ) );
+                self.parse.call( self, _.sortBy( data.data, "name" ) );
             });
+        },
+
+        addToFavorites: function( beer ) {
+            this.favorites.push( beer );
+        },
+
+        removeFromFavorites: function( beer ) {
+            this.favorites.remove( beer );
+        },
+
+        doSearch: function() {
+            return false;
         }
     });
 

diff --git a/src/sass/styles.scss b/src/sass/styles.scss
@@ -1,2 +1,12 @@
 @import "print";
 @import "screen";
+
+body { font-family: verdana; }
+
+#main {
+    width: 50%;
+    margin: 0 auto;
+    font-size: .9em;
+
+    .search, .favorites { width: 50%; float: left; }
+}