Redirects, transition aborts, and title management.

app/controllers/bands/band/details.js

@@ -0,0 +1,14 @@
+import Ember from 'ember';
+
+export default Ember.Controller.extend({
+  isEditing: false,
+
+  actions: {
+    edit: function(){
+      this.set('isEditing', true);
+    },
+    save: function(){
+      this.set('isEditing', false);
+    }
+  }
+});

app/models/band.js

@@ -2,6 +2,7 @@ import Ember from 'ember';
 
 export default Ember.Object.extend({
   name: '',
+  description: '',
 
   setupSongs: Ember.on('init', function(){
     if (!this.get('songs')) {

app/router.js

@@ -8,8 +8,8 @@ var Router = Ember.Router.extend({
 Router.map(function() {
   this.route('bands', function(){
     this.route('band', { path: ':slug' }, function(){
+      this.route('details');
       this.route('songs');
-      this.route('albums');
     });;
   });;
 });

app/routes/bands.js

@@ -14,7 +14,11 @@ var daughter = Song.create({ title: 'Daughter', band: 'Pearl Jam', rating: 5 });
 var pretender = Song.create({ title: 'The Pretender', band: 'Foo Fighters', rating: 4 });
 
 var ledZeppelin = Band.create({ name: 'Led Zeppelin', songs: [blackDog] });
-var pearlJam = Band.create({ name: 'Pearl Jam', songs: [yellowLedbetter, daughter] });
+var pearlJam = Band.create({
+  name: 'Pearl Jam',
+  songs: [yellowLedbetter, daughter],
+  description: 'Pearl Jam is an American rock band, formed in Seattle, Washington in 1990.'
+});
 var fooFighters = Band.create({ name: 'Foo Fighters', songs: [pretender] });
 
 var bands = BandsCollection.create();
@@ -27,6 +31,9 @@ export default Ember.Route.extend({
   },
 
   actions: {
+    didTransition: function(){
+      document.title = 'Bands - Rock & Roll';
+    },
     createBand: function(){
       var name = this.get('controller').get('name');
       var band = Band.create({name: name});

app/routes/bands/band/details.js

@@ -0,0 +1,17 @@
+import Ember from 'ember';
+
+export default Ember.Route.extend({
+  actions: {
+    willTransition: function(transition){
+      var controller = this.get('controller'), leave;
+      if (controller.get('isEditing')){
+        leave = window.confirm('You have unsaved changes. Are you sure you want to leave?');
+        if (leave){
+          controller.set('isEditing', false);
+        } else {
+          transition.abort();
+        }
+      }
+    }
+  }
+});

app/routes/bands/band/index.js

@@ -0,0 +1,13 @@
+import Ember from 'ember';
+
+export default Ember.Route.extend({
+
+  afterModel: function(band){
+    var description = band.get('description');
+    if (Ember.isEmpty(description)){
+      this.transitionTo('bands.band.songs');
+    } else {
+      this.transitionTo('bands.band.details');
+    }
+  }
+});

app/routes/bands/band/songs.js

@@ -2,11 +2,11 @@ import Ember from 'ember';
 import Song from '../../../models/song';
 
 export default Ember.Route.extend({
-  model: function(){
-    return this.modelFor('bands.band');
-  },
-
   actions: {
+    didTransition: function(){
+      var band = this.modelFor('bands.band');
+      document.title = `${band.get('name')} songs - Rock & Roll`;
+    },
     createSong: function(){
       var controller = this.get('controller');
       var band = this.modelFor('bands.band');

app/routes/index.js

@@ -0,0 +1,7 @@
+import Ember from 'ember';
+
+export default Ember.Route.extend({
+  beforeModel: function(){
+    this.transitionTo('bands');
+  }
+});

app/styles/app.css

@@ -60,3 +60,26 @@ html, body {
 .rating-panel {
   float: right;
 }
+
+.page-header a:hover {
+  text-decoration: none;
+}
+
+.band-info {
+  margin-top: 20px;
+}
+
+.nav-tabs > li > a.active,
+.nav-tabs > li > a.active:hover,
+.nav-tabs > li > a.active:focus {
+  color: #555;
+  cursor: default;
+  background-color: #fff;
+  border: 1px solid #ddd;
+  border-bottom-color: transparent;
+}
+
+.band-description-header {
+  margin-bottom: 20px;
+}
+

app/templates/bands.hbs

@@ -9,7 +9,7 @@
             </form>
         </div>
         {{#each model.sortedContent as |band|}}
-          {{#link-to "bands.band.songs" band class="list-group-item band-link"}}
+          {{#link-to "bands.band" band class="list-group-item band-link"}}
             {{band.name}}
             <span class="pointer glyphicon glyphicon-chevron-right"></span>
           {{/link-to}}

app/templates/bands/band.hbs

@@ -0,0 +1,7 @@
+<ul class="nav nav-tabs">
+    <li>{{link-to 'Details' 'bands.band.details' model}}</li>
+    <li>{{link-to 'Songs' 'bands.band.songs' model}}</li>
+</ul>
+<div class="band-info">
+    {{outlet}}
+</div>

app/templates/bands/band/details.hbs

@@ -0,0 +1,16 @@
+<div class="panel panel-default band-panel">
+    <div class="panel-body">
+        <h4 class="panel-title band-description-header pull-left">Description</h4>
+      {{#if isEditing}}
+          <button class="btn btn-primary pull-right" {{action "save"}}>Save</button>
+      {{else}}
+          <button class="btn btn-primary pull-right" {{action "edit"}}>Edit</button>
+      {{/if}}
+      <div class="clearfix"></div>
+      {{#if isEditing}}
+        {{textarea class="form-control" value=model.description}}
+      {{else}}
+          <p>{{model.description}}</p>
+      {{/if}}
+    </div>
+</div>

tests/unit/controllers/bands/band/details-test.js

@@ -0,0 +1,12 @@
+import { moduleFor, test } from 'ember-qunit';
+
+moduleFor('controller:bands/band/details', {
+  // Specify the other units that are required for this test.
+  // needs: ['controller:foo']
+});
+
+// Replace this with your real tests.
+test('it exists', function(assert) {
+  var controller = this.subject();
+  assert.ok(controller);
+});

tests/unit/routes/bands/band/details-test.js

@@ -0,0 +1,11 @@
+import { moduleFor, test } from 'ember-qunit';
+
+moduleFor('route:bands/band/details', 'Unit | Route | bands/band/details', {
+  // Specify the other units that are required for this test.
+  // needs: ['controller:foo']
+});
+
+test('it exists', function(assert) {
+  var route = this.subject();
+  assert.ok(route);
+});

tests/unit/routes/bands/band/index-test.js

@@ -0,0 +1,11 @@
+import { moduleFor, test } from 'ember-qunit';
+
+moduleFor('route:bands/band/index', 'Unit | Route | bands/band/index', {
+  // Specify the other units that are required for this test.
+  // needs: ['controller:foo']
+});
+
+test('it exists', function(assert) {
+  var route = this.subject();
+  assert.ok(route);
+});

tests/unit/routes/index-test.js

@@ -0,0 +1,11 @@
+import { moduleFor, test } from 'ember-qunit';
+
+moduleFor('route:index', 'Unit | Route | index', {
+  // Specify the other units that are required for this test.
+  // needs: ['controller:foo']
+});
+
+test('it exists', function(assert) {
+  var route = this.subject();
+  assert.ok(route);
+});