[Calf] Adds Songs page.

diff --git a/example/index.html b/example/index.html
index cf789a8..2f96731 100644 (file)
--- a/example/index.html
+++ b/example/index.html
@@ -36,7 +36,7 @@
           <ul class="nav">
             <li><a {{action showArtists href=true}}>Artists</a></li>
             <li><a {{action showAlbums href=true}}>Albums</a></li>
-            <li><a href="#">Songs</a></li>
+            <li><a {{action showSongs href=true}}>Songs</a></li>
           </ul>
         </div>
       </div>
@@ -72,6 +72,16 @@
         <strong>{{album.name}}</strong> ({{album.year}})
     </script>
 
+    <script type="text/x-handlebars" data-template-name="songs">
+      {{#each song in controller.arrangedContent}}
+        <li>{{view Calf.SongView contentBinding="song"}}</li>
+      {{/each}}
+    </script>
+
+    <script type="text/x-handlebars" data-template-name="song">
+        <strong>{{song.title}}</strong> ({{song.duration}})
+    </script>
+
     <!-- The glorious cowhide framework. -->
     <script src="../dist/cowhide.js"></script>
 
@@ -89,16 +99,20 @@
 
     <script src="javascripts/app/models/artist.js"></script>
     <script src="javascripts/app/models/album.js"></script>
+    <script src="javascripts/app/models/song.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/views/songs.js"></script>
+    <script src="javascripts/app/views/song.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>
+    <script src="javascripts/app/controllers/songs.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/songs.js b/example/javascripts/app/controllers/songs.js
new file mode 100644 (file)
index 0000000..baaf838
--- /dev/null
+++ b/example/javascripts/app/controllers/songs.js
@@ -0,0 +1,20 @@
+(function(app, Ember, _) {
+    'use strict';
+
+    var SongsController = Ember.ArrayController.extend({
+        content: [],
+        sortProperties: ['title'],
+
+        init: function() {
+            var self = this;
+            var data = [];
+
+            _.each(app.Store.getSongs(), function(song) {
+                self.pushObject(song);
+            });
+        }
+    });
+
+    app.SongsController = SongsController;
+    app.songsController = SongsController.create();
+})(window.Calf, window.Ember, window._);
\ No newline at end of file

diff --git a/example/javascripts/app/models/song.js b/example/javascripts/app/models/song.js
new file mode 100644 (file)
index 0000000..269877a
--- /dev/null
+++ b/example/javascripts/app/models/song.js
@@ -0,0 +1,11 @@
+(function(app, Ember) {
+    'use strict';
+
+    var Song = Ember.Object.extend({
+        id: null,
+        title: null,
+        duration: null
+    });
+
+    app.Song = Song;
+})(window.Calf, window.Ember);

diff --git a/example/javascripts/app/router.js b/example/javascripts/app/router.js
index fb4c847..d8b9958 100644 (file)
--- a/example/javascripts/app/router.js
+++ b/example/javascripts/app/router.js
@@ -7,6 +7,7 @@
         root: Ember.Route.extend({
             showArtists: Ember.Route.transitionTo('artists'),
             showAlbums: Ember.Route.transitionTo('albums'),
+            showSongs: Ember.Route.transitionTo('songs'),
 
             index: Ember.Route.extend({
                 route: '/',
@@ -27,6 +28,14 @@
                     var controller = router.get('applicationController');
                     controller.connectOutlet('albums');
                 }
+            }),
+
+            songs: Ember.Route.extend({
+                route: '/songs',
+                connectOutlets: function(router) {
+                    var controller = router.get('applicationController');
+                    controller.connectOutlet('songs');
+                }
             })
         })
     });

diff --git a/example/javascripts/app/store.js b/example/javascripts/app/store.js
index 0010f95..e93a599 100644 (file)
--- a/example/javascripts/app/store.js
+++ b/example/javascripts/app/store.js
@@ -11,7 +11,21 @@
              "albums": [
                 {"id": 0,
                  "name": "11:11",
-                 "year": 2001
+                 "year": 2001,
+                 "songs": [
+                    {"id": 0,
+                     "title": "Love Affair",
+                     "duration": "2:22"
+                    },
+                    {"id": 1,
+                     "title": "Rejazz",
+                     "duration": "3:37"
+                    },
+                    {"id": 2,
+                     "title": "Back of a Truck",
+                     "duration": "5:52"
+                    }
+                 ]
                 },
                 {"id": 1,
                  "name": "Songs",
@@ -67,6 +81,26 @@
             });
 
             return albums;
+        },
+
+        getSongs: function(artist, album) {
+            var songs = [];
+
+            _.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) {
+                        if (album_data.songs &&
+                            (album === undefined || album_data.id === album.get('id'))) {
+                            _.each(album_data.songs, function(song_data) {
+                                songs.push(app.Song.create(song_data));
+                            });
+                        }
+                    });
+                }
+            });
+
+            return songs;
         }
     };
 

diff --git a/example/javascripts/app/views/song.js b/example/javascripts/app/views/song.js
new file mode 100644 (file)
index 0000000..8d91505
--- /dev/null
+++ b/example/javascripts/app/views/song.js
@@ -0,0 +1,11 @@
+(function(app, Ember) {
+    'use strict';
+
+    var SongView = Ember.View.extend({
+        templateName: 'song',
+        tagName: 'span',
+        classNames: ['song']
+    });
+
+    app.SongView = SongView;
+})(window.Calf, window.Ember);
\ No newline at end of file

diff --git a/example/javascripts/app/views/songs.js b/example/javascripts/app/views/songs.js
new file mode 100644 (file)
index 0000000..18df3c9
--- /dev/null
+++ b/example/javascripts/app/views/songs.js
@@ -0,0 +1,11 @@
+(function(app, Ember) {
+    'use strict';
+
+    var SongsView = Ember.View.extend({
+        templateName: 'songs',
+        tagName: 'ul',
+        classNames: ['item-list', 'striped']
+    });
+
+    app.SongsView = SongsView;
+})(window.Calf, window.Ember);
\ No newline at end of file