Switching panels is now event driven!

assets/js/components/library.js

@@ -46,7 +46,7 @@ can.Component.extend({
       }
     },
 
-    ' showPanel': function(el, ev, data) {
+    ' switchPanel': function(el, ev, data) {
       this.scope.attr('currentDepth', data);
     }
   }

assets/js/components/panel-albums.js

@@ -4,13 +4,6 @@ can.Component.extend({
 
   template: can.view('views/panels/albums.mustache'),
 
-  init: function() {
-    var self = this;
-    Album.findAll({ artist: this.scope.artist }, function(data) {
-      self.scope.attr('items', data);
-    });
-  },
-
   scope: {
     depth: "@",
     artist: "@",
@@ -24,9 +17,19 @@ can.Component.extend({
     }
   },
 
+  events: {
+    init: function() {
+      var self = this;
+      Album.findAll({ artist: this.scope.artist }, function(data) {
+        self.scope.attr('items', data);
+        self.element.trigger('switchPanel', self.scope.depth);
+      });
+    }
+  },
+
   helpers: {
     link: function(item) {
-      return can.route.link(item.name, {
+      return can.route.link(item.title, {
         type: 'library',
         show: 'songs',
         artist: item.artist,

assets/js/components/panel-artists.js

@@ -4,17 +4,18 @@ can.Component.extend({
 
   template: can.view('views/panels/artists.mustache'),
 
+  scope: {
+    depth: "@"
+  },
+
+  events: {
     init: function() {
       var self = this;
       Artist.findAll({}, function(data) {
-      console.log(data);
         self.scope.attr('items', data);
-      self._control.element.trigger('showPanel', self.scope.depth);
+        self.element.trigger('switchPanel', self.scope.depth);
       });
-  },
-
-  scope: {
-    depth: "@"
+    }
   },
 
   helpers: {

public/views/panels/albums.mustache

@@ -4,7 +4,7 @@
 </header>
 
 <ol class="albums">
-  {{#each items}}
+  {{#items}}
     <li>{{{link .}}}</li>
-  {{/each}}
+  {{/items}}
 </ol>