From a4912d4ba20ead14f511c09f4233a3a28fcadb7d Mon Sep 17 00:00:00 2001
From: Salvatore Iovene <salvatore.iovene@intel.com>
Date: Tue, 2 Oct 2012 10:40:46 +0300
Subject: [PATCH] [Calf] Adds Albums page.

---
 example/index.html                             | 18 ++++++++-
 example/javascripts/app/controllers/albums.js  | 20 ++++++++++
 example/javascripts/app/controllers/artists.js |  1 +
 example/javascripts/app/models/album.js        | 11 ++++++
 example/javascripts/app/router.js              | 18 ++++++++-
 example/javascripts/app/store.js               | 54 +++++++++++++++++++++-----
 example/javascripts/app/views/album.js         | 11 ++++++
 example/javascripts/app/views/albums.js        | 11 ++++++
 8 files changed, 131 insertions(+), 13 deletions(-)
 create mode 100644 example/javascripts/app/controllers/albums.js
 create mode 100644 example/javascripts/app/models/album.js
 create mode 100644 example/javascripts/app/views/album.js
 create mode 100644 example/javascripts/app/views/albums.js

diff --git a/example/index.html b/example/index.html
index fbd7beb..cf789a8 100644
--- a/example/index.html
+++ b/example/index.html
@@ -34,8 +34,8 @@
         <div class="navbar-inner">
           <a class="brand" href="#">Calf</a>
           <ul class="nav">
-            <li><a href="#" {{action showArtists}}>Artists</a></li>
-            <li><a href="#">Albums</a></li>
+            <li><a {{action showArtists href=true}}>Artists</a></li>
+            <li><a {{action showAlbums href=true}}>Albums</a></li>
             <li><a href="#">Songs</a></li>
           </ul>
         </div>
@@ -62,6 +62,16 @@
       {{/if}}
     </script>
 
+    <script type="text/x-handlebars" data-template-name="albums">
+      {{#each album in controller.arrangedContent}}
+        <li>{{view Calf.AlbumView contentBinding="album"}}</li>
+      {{/each}}
+    </script>
+
+    <script type="text/x-handlebars" data-template-name="album">
+        <strong>{{album.name}}</strong> ({{album.year}})
+    </script>
+
     <!-- The glorious cowhide framework. -->
     <script src="../dist/cowhide.js"></script>
 
@@ -78,13 +88,17 @@
     <script src="javascripts/app/store.js"></script>
 
     <script src="javascripts/app/models/artist.js"></script>
+    <script src="javascripts/app/models/album.js"></script>
 
     <script src="javascripts/app/views/application.js"></script>
     <script src="javascripts/app/views/artists.js"></script>
     <script src="javascripts/app/views/artist.js"></script>
+    <script src="javascripts/app/views/albums.js"></script>
+    <script src="javascripts/app/views/album.js"></script>
 
     <script src="javascripts/app/controllers/application.js"></script>
     <script src="javascripts/app/controllers/artists.js"></script>
+    <script src="javascripts/app/controllers/albums.js"></script>
 
     <!-- This file contains other code needed by the example app. -->
     <script src="javascripts/example.js"></script>
diff --git a/example/javascripts/app/controllers/albums.js b/example/javascripts/app/controllers/albums.js
new file mode 100644
index 0000000..e14ec75
--- /dev/null
+++ b/example/javascripts/app/controllers/albums.js
@@ -0,0 +1,20 @@
+(function(app, Ember, _) {
+    'use strict';
+
+    var AlbumsController = Ember.ArrayController.extend({
+        content: [],
+        sortProperties: ['name'],
+
+        init: function() {
+            var self = this;
+            var data = [];
+
+            _.each(app.Store.getAlbums(), function(album) {
+                self.pushObject(album);
+            });
+        }
+    });
+
+    app.AlbumsController = AlbumsController;
+    app.albumsController = AlbumsController.create();
+})(window.Calf, window.Ember, window._);
\ No newline at end of file
diff --git a/example/javascripts/app/controllers/artists.js b/example/javascripts/app/controllers/artists.js
index b10099d..0e8df07 100644
--- a/example/javascripts/app/controllers/artists.js
+++ b/example/javascripts/app/controllers/artists.js
@@ -16,4 +16,5 @@
     });
 
     app.ArtistsController = ArtistsController;
+    app.artistsController = ArtistsController.create();
 })(window.Calf, window.Ember, window._);
\ No newline at end of file
diff --git a/example/javascripts/app/models/album.js b/example/javascripts/app/models/album.js
new file mode 100644
index 0000000..1416439
--- /dev/null
+++ b/example/javascripts/app/models/album.js
@@ -0,0 +1,11 @@
+(function(app, Ember) {
+    'use strict';
+
+    var Album = Ember.Object.extend({
+        id: null,
+        name: null,
+        year: null
+    });
+
+    app.Album = Album;
+})(window.Calf, window.Ember);
diff --git a/example/javascripts/app/router.js b/example/javascripts/app/router.js
index f494552..fb4c847 100644
--- a/example/javascripts/app/router.js
+++ b/example/javascripts/app/router.js
@@ -2,17 +2,31 @@
     'use strict';
 
     var Router = Ember.Router.extend({
-        location: 'none',
+        location: 'hash',
 
         root: Ember.Route.extend({
-            showArtists: Ember.Route.transitionTo('index'),
+            showArtists: Ember.Route.transitionTo('artists'),
+            showAlbums: Ember.Route.transitionTo('albums'),
 
             index: Ember.Route.extend({
                 route: '/',
+                redirectsTo: 'artists'
+            }),
+
+            artists: Ember.Route.extend({
+                route: '/artists',
                 connectOutlets: function(router) {
                     var controller = router.get('applicationController');
                     controller.connectOutlet('artists');
                 }
+            }),
+
+            albums: Ember.Route.extend({
+                route: '/albums',
+                connectOutlets: function(router) {
+                    var controller = router.get('applicationController');
+                    controller.connectOutlet('albums');
+                }
             })
         })
     });
diff --git a/example/javascripts/app/store.js b/example/javascripts/app/store.js
index baecd3e..0010f95 100644
--- a/example/javascripts/app/store.js
+++ b/example/javascripts/app/store.js
@@ -1,4 +1,4 @@
-(function(app) {
+(function(app, _) {
     'use strict';
 
     var Store = function() {}
@@ -7,7 +7,33 @@
         data: [
             {"id": 0,
              "firstName": "Regina",
-             "lastName": "Spektor"
+             "lastName": "Spektor",
+             "albums": [
+                {"id": 0,
+                 "name": "11:11",
+                 "year": 2001
+                },
+                {"id": 1,
+                 "name": "Songs",
+                 "year": 2002
+                },
+                {"id": 2,
+                 "name": "Soviet Kitsch",
+                 "year": 2004
+                },
+                {"id": 3,
+                 "name": "Begin to Hope",
+                 "year": 2006
+                },
+                {"id": 4,
+                 "name": "Far",
+                 "year": 2009
+                },
+                {"id": 5,
+                 "name": "What We Saw from the Cheap Seats",
+                 "year": 2012
+                }
+             ]
             },
             {"id": 1,
              "firstName": "Ani",
@@ -24,15 +50,25 @@
             }
         ],
 
-        getArtist: function(artist) {
-            return app.Artist.create({
-                "id": artist.id,
-                "firstName": artist.firstName,
-                "lastName": artist.lastName,
-                "bandName": artist.bandName
+        getArtist: function(artist_data) {
+            return app.Artist.create(artist_data);
+        },
+
+        getAlbums: function(artist) {
+            var albums = [];
+
+            _.each(this.data, function(artist_data) {
+                if (artist_data.albums &&
+                    (artist === undefined || artist_data.id === artist.get('id'))) {
+                    _.each(artist_data.albums, function(album_data) {
+                        albums.push(app.Album.create(album_data));
+                    });
+                }
             });
+
+            return albums;
         }
     };
 
     app.Store = new Store();
-})(window.Calf);
\ No newline at end of file
+})(window.Calf, window._);
\ No newline at end of file
diff --git a/example/javascripts/app/views/album.js b/example/javascripts/app/views/album.js
new file mode 100644
index 0000000..fb845b2
--- /dev/null
+++ b/example/javascripts/app/views/album.js
@@ -0,0 +1,11 @@
+(function(app, Ember) {
+    'use strict';
+
+    var AlbumView = Ember.View.extend({
+        templateName: 'album',
+        tagName: 'span',
+        classNames: ['album']
+    });
+
+    app.AlbumView = AlbumView;
+})(window.Calf, window.Ember);
\ No newline at end of file
diff --git a/example/javascripts/app/views/albums.js b/example/javascripts/app/views/albums.js
new file mode 100644
index 0000000..36da417
--- /dev/null
+++ b/example/javascripts/app/views/albums.js
@@ -0,0 +1,11 @@
+(function(app, Ember) {
+    'use strict';
+
+    var AlbumsView = Ember.View.extend({
+        templateName: 'albums',
+        tagName: 'ul',
+        classNames: ['item-list', 'striped']
+    });
+
+    app.AlbumsView = AlbumsView;
+})(window.Calf, window.Ember);
\ No newline at end of file
-- 
2.7.4