From e3a4d0194cb5456b4d8013eff61cc5f518e7c80a Mon Sep 17 00:00:00 2001 From: Sven Fuchs Date: Mon, 18 Jun 2012 01:10:30 +0200 Subject: [PATCH] url generation seems to work fine, but for some weird reason it seems to pushState urls with all segments undefined --- app/assets/javascripts/app/app.js | 109 ++++++++++-------- .../javascripts/app/templates/application.hbs | 5 + .../javascripts/app/templates/history.hbs | 2 +- app/assets/stylesheets/application.css | 29 ++++- 4 files changed, 94 insertions(+), 51 deletions(-) diff --git a/app/assets/javascripts/app/app.js b/app/assets/javascripts/app/app.js index 283b8b84..8b9715d1 100644 --- a/app/assets/javascripts/app/app.js +++ b/app/assets/javascripts/app/app.js @@ -51,69 +51,67 @@ App.Router = Em.Router.extend({ enableLogging: true, location: 'hash', + serialize: function() { + var ownerName = this.getPath('repositoryController.content.ownerName'); + var name = this.getPath('repositoryController.content.name'); + return { ownerName: ownerName, name: name }; + }, + + connectLeft: function() { + this.get('applicationController').connectOutlet({ outletName: 'left', name: 'repositories', context: App.Repository.find() }) + }, + + connectLoading: function() { + this.get('applicationController').connectOutlet({ outletName: 'main', name: 'loading' }); + }, + + connectMain: function(repository, build) { + this.setPath('tabsController.repository', repository); + this.setPath('tabsController.build', build); + + this.get('applicationController').connectOutlet({ outletName: 'main', name: 'repository', context: repository }); + this.get('repositoryController').connectOutlet({ outletName: 'tabs', name: 'tabs' }); + }, + root: Em.Route.extend({ - routePath: function(router, path) { - router.transitionTo('loading', path); - }, + viewRepository: Ember.Route.transitionTo('repository.current'), - 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() { - router.transitionTo('index', repositories.get('firstObject')); - }) - } 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); - }) - } - } - }), + // why is applicationController undefined here? would like to share connecting the left outlet to repositories + // connectOutlets: function(router) { + // router.connectLeft(); + // }, index: Em.Route.extend({ route: '/', - connectOutlets: function(router, repository) { - var build = App.Build.find(1); + connectOutlets: function(router) { + router.connectLeft(); + router.connectLoading(); - 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' }); - router.get('repositoryController').connectOutlet({ outletName: 'tab', name: 'current', context: build}); + var repositories = router.getPath('repositoriesController.content'); + // should observe RecordArray.isLoaded instead, but that doesn't seem to exist? + onReady(repositories, 'firstObject.isLoaded', function() { + router.connectMain(repositories.get('firstObject'), App.Build.find(1)) + }); }, - viewCurrent: Ember.Route.transitionTo('root.repository.current'), - viewHistory: Ember.Route.transitionTo('root.repository.history'), - viewBuild: Ember.Route.transitionTo('root.repository.build'), + viewCurrent: Ember.Route.transitionTo('repository.current'), + viewHistory: Ember.Route.transitionTo('repository.history'), + viewBuild: Ember.Route.transitionTo('repository.build'), }), repository: Em.Route.extend({ route: '/:ownerName/:name', - serialize: function(router, repository) { - return repository.getProperties('ownerName', 'name'); - }, + connectOutlets: function(router) { + router.connectLeft(); + router.connectLoading(); - 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' }); + // this would be a query for the repo based on path (how to retrieve the path here?) + var repository = App.Repository.find(1); + onReady(repository, 'isLoaded', function() { + router.connectMain(repository, App.Build.find(1)) + }) }, viewCurrent: Ember.Route.transitionTo('current'), @@ -122,6 +120,11 @@ App.Router = Em.Router.extend({ current: Em.Route.extend({ route: '/', + + serialize: function(router, context) { + return router.serialize(); + }, + connectOutlets: function(router, context) { router.get('repositoryController').connectOutlet({ outletName: 'tab', name: 'current', context: App.Build.find(1)}); } @@ -129,6 +132,11 @@ App.Router = Em.Router.extend({ history: Em.Route.extend({ route: '/builds', + + serialize: function(router, context) { + return router.serialize(); + }, + connectOutlets: function(router, context) { router.get('repositoryController').connectOutlet({ outletName: 'tab', name: 'history', context: App.Build.find()}); } @@ -136,6 +144,11 @@ App.Router = Em.Router.extend({ build: Em.Route.extend({ route: '/builds/:build_id', + + serialize: function(router, context) { + return $.extend(router.serialize(), this._super(router, context)); + }, + connectOutlets: function(router, context) { params = { id: 1 } router.get('repositoryController').connectOutlet({ outletName: 'tab', name: 'build', context: App.Build.find(params.id)}); diff --git a/app/assets/javascripts/app/templates/application.hbs b/app/assets/javascripts/app/templates/application.hbs index 1f71b147..e2178f7f 100644 --- a/app/assets/javascripts/app/templates/application.hbs +++ b/app/assets/javascripts/app/templates/application.hbs @@ -1,3 +1,8 @@ + +
{{outlet left}}
diff --git a/app/assets/javascripts/app/templates/history.hbs b/app/assets/javascripts/app/templates/history.hbs index dda110f4..e4ac6515 100644 --- a/app/assets/javascripts/app/templates/history.hbs +++ b/app/assets/javascripts/app/templates/history.hbs @@ -1,6 +1,6 @@ diff --git a/app/assets/stylesheets/application.css b/app/assets/stylesheets/application.css index 8d20dfb0..8255cee0 100644 --- a/app/assets/stylesheets/application.css +++ b/app/assets/stylesheets/application.css @@ -16,6 +16,13 @@ body { font-family: Helvetica; } +#head { + width: 100%; + height: 40px; + font-size: 20px; + font-weight: bold; +} + #left, #main { float: left; height: 500px; @@ -23,14 +30,32 @@ body { #left { width: 200px; - background-color: #f9f9f9; } #main { width: 400px; - padding: 1em; + padding-left: 1em; } h2 { margin-top: 0; } + +ul { + margin: 0; + padding: 0; +} + +li { + list-style-type: none; +} + +.tabs li { + float: left; + margin-right: 20px; +} + +.tab { + clear: both; + padding-top: 20px; +}