<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>
{{/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>
<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>
--- /dev/null
+(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
});
app.ArtistsController = ArtistsController;
+ app.artistsController = ArtistsController.create();
})(window.Calf, window.Ember, window._);
\ No newline at end of file
--- /dev/null
+(function(app, Ember) {
+ 'use strict';
+
+ var Album = Ember.Object.extend({
+ id: null,
+ name: null,
+ year: null
+ });
+
+ app.Album = Album;
+})(window.Calf, window.Ember);
'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');
+ }
})
})
});
-(function(app) {
+(function(app, _) {
'use strict';
var Store = function() {}
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",
}
],
- 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
--- /dev/null
+(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
--- /dev/null
+(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