playing with ember routes

app/assets/javascripts/app/app.js

@@ -15,54 +15,104 @@ App.Build = DS.Model.extend({
 App.Repository.FIXTURES = [{ id: 1, owner_name: 'travis-ci', name: 'travis-core' }];
 App.Build.FIXTURES      = [{ id: 1, number: 1 }, { id: 2, number: 2 }];
 
-App.ApplicationController = Em.Controller.extend();
-App.RepositoryController  = Em.Controller.extend();
-App.TabsController        = Em.Controller.extend();
-App.CurrentController     = Em.Controller.extend();
-App.HistoryController     = Em.ArrayController.extend();
-App.BuildController       = Em.Controller.extend();
+App.ApplicationController  = Em.Controller.extend();
+App.RepositoriesController = Em.Controller.extend();
+App.RepositoryController   = Em.Controller.extend();
+App.TabsController         = Em.Controller.extend();
+App.CurrentController      = Em.Controller.extend();
+App.HistoryController      = Em.ArrayController.extend();
+App.BuildController        = Em.Controller.extend();
+App.LoadingController      = Em.Controller.extend();
 
-App.ApplicationView       = Em.View.extend({ templateName: 'application' });
-App.RepositoryView        = Em.View.extend({ templateName: 'repository' });
-App.TabsView              = Em.View.extend({ templateName: 'tabs' });
-App.CurrentView           = Em.View.extend({ templateName: 'current' });
-App.HistoryView           = Em.View.extend({ templateName: 'history' });
-App.BuildView             = Em.View.extend({ templateName: 'build' });
+App.ApplicationView        = Em.View.extend({ templateName: 'application' });
+App.RepositoriesView       = Em.View.extend({ templateName: 'repositories' });
+App.RepositoryView         = Em.View.extend({ templateName: 'repository' });
+App.TabsView               = Em.View.extend({ templateName: 'tabs' });
+App.CurrentView            = Em.View.extend({ templateName: 'current' });
+App.HistoryView            = Em.View.extend({ templateName: 'history' });
+App.BuildView              = Em.View.extend({ templateName: 'build' });
+App.LoadingView            = Em.View.extend({ templateName: 'loading' });
 
 App.store = App.Store.create();
 
+var onReady = function(object, path, callback) {
+  if(object.getPath(path)) {
+    callback();
+  } else {
+    var observer = function() {
+      object.removeObserver(path, observer);
+      callback()
+    };
+    object.addObserver(path, observer);
+  }
+};
+
 App.Router = Em.Router.extend({
   enableLogging: true,
   location: 'hash',
 
   root: Em.Route.extend({
-    index: Ember.Route.extend({
-      route: '/',
-      redirectsTo: 'repository'
+    routePath: function(router, path) {
+      router.transitionTo('loading', path);
+    },
+
+    viewRepository: Ember.Route.transitionTo('repository'),
+
+    loading: Ember.Route.extend({
+      connectOutlets: function(router, path) {
+        var repositories = App.Repository.find();
+
+        router.get('applicationController').connectOutlet({ outletName: 'left', name: 'repositories', context: repositories})
+        router.get('applicationController').connectOutlet({ outletName: 'main', name: 'loading' });
+
+        if (path === '') {
+          // should observe RecordArray.isLoaded instead, but that doesn't seem to exist?
+          onReady(repositories, 'length', function() {
+            var repository = repositories.get('firstObject');
+            router.transitionTo('repository', repository);
+          })
+        } else {
+          // this would be a query for the repo based on `path`
+          var repository = App.Repository.find(1);
+          onReady(repository, 'isLoaded', function() {
+            router.transitionTo('repository', repository);
+          })
+        }
+      }
     }),
 
     repository: Em.Route.extend({
-      route: '/:repository_ownerName/:repository_name',
+      route: '/:ownerName/:name',
+
+      serialize: function(router, repository) {
+        return repository.getProperties('ownerName', 'name');
+      },
+
+      connectOutlets: function(router, repository) {
+        var build = App.Build.find(1);
+
+        router.setPath('tabsController.repository', repository);
+        router.setPath('tabsController.build', build);
+
+        router.get('applicationController').connectOutlet({ outletName: 'main', name: 'repository', context: repository});
+        router.get('repositoryController').connectOutlet({ outletName: 'tabs', name: 'tabs' });
+      },
 
       viewCurrent: Ember.Route.transitionTo('current'),
       viewHistory: Ember.Route.transitionTo('history'),
       viewBuild:   Ember.Route.transitionTo('build'),
 
-      enter: function(router) {
-        router.get('applicationController').connectOutlet({ name: 'repository', context: App.store.find(App.Repository, 1) });
-      },
-
       current: Em.Route.extend({
         route: '/',
         connectOutlets: function(router, context) {
-          router.get('repositoryController').connectOutlet({ name: 'current', context: App.store.find(App.Build, 1)});
+          router.get('repositoryController').connectOutlet({ outletName: 'tab', name: 'current', context: App.store.find(App.Build, 1)});
         }
       }),
 
       history: Em.Route.extend({
         route: '/builds',
         connectOutlets: function(router, context) {
-          router.get('repositoryController').connectOutlet({ name: 'history', context: App.store.findAll(App.Build)});
+          router.get('repositoryController').connectOutlet({ outletName: 'tab', name: 'history', context: App.store.findAll(App.Build)});
         }
       }),
 
@@ -70,7 +120,7 @@ App.Router = Em.Router.extend({
         route: '/builds/:build_id',
         connectOutlets: function(router, context) {
           params = { id: 1 }
-          router.get('repositoryController').connectOutlet({ name: 'build', context: App.store.find(App.Build, params.id)});
+          router.get('repositoryController').connectOutlet({ outletName: 'tab', name: 'build', context: App.store.find(App.Build, params.id)});
         }
       })
     })
@@ -78,4 +128,3 @@ App.Router = Em.Router.extend({
 });
 
 App.initialize();
-

app/assets/javascripts/app/templates/application.hbs

@@ -1,3 +1,7 @@
-<h1>App</h1>
+<div id="left">
+  {{outlet left}}
+</div>
 
-{{outlet}}
+<div id="main">
+  {{outlet main}}
+</div>

app/assets/javascripts/app/templates/build.hbs

@@ -1,2 +1,2 @@
-build {{build.id}}
+build {{content.id}}
 

app/assets/javascripts/app/templates/loading.hbs

@@ -0,0 +1 @@
+loading stuff ...

app/assets/javascripts/app/templates/repositories.hbs

@@ -0,0 +1,6 @@
+<ul>
+  {{#each repository in content}}
+    <li><a {{action viewRepository href=true}}>{{repository.ownerName}}/{{repository.name}}</a></li>
+  {{/each}}
+</ul>
+

app/assets/javascripts/app/templates/repository.hbs

@@ -1,7 +1,7 @@
 <h2>{{content.ownerName}}/{{content.name}}</h2>
 
-{{view App.TabsView controllerBinding="controller.controllers.tabsController"}}
+{{outlet tabs}}
 
 <div class="content">
-  {{outlet}}
+  {{outlet tab}}
 </div>

app/assets/javascripts/app/templates/tabs.hbs

@@ -1,9 +1,5 @@
 <ul class="tabs">
   <li><a {{action viewCurrent href=true}}>Current</a></li>
   <li><a {{action viewHistory href=true}}>History</a></li>
-  <li><a {{action viewBuild href=true}}>Build</a></li>
+  <li><a {{action viewBuild context="build" href=true}}>Build</a></li>
 </ul>
-
-<p class="note">
-  The builds tab anchor tag should be linked to {{repository.ownerName}}/{{repository.name}}/builds/{{build.id}}
-</p>

app/assets/stylesheets/application.css

@@ -11,3 +11,26 @@
  *= require_self
  *= require_tree .
  */
+
+body {
+  font-family: Helvetica;
+}
+
+#left, #main {
+  float: left;
+  height: 500px;
+}
+
+#left {
+  width: 200px;
+  background-color: #f9f9f9;
+}
+
+#main {
+  width: 400px;
+  padding: 1em;
+}
+
+h2 {
+  margin-top: 0;
+}