pangratz prattles

GitHub Dashboard #5

Jul23rd, 20122:24 pm

Goal of this iteration: Create route /:username

Currently there is no possibility to change the username so we can see watched repositories for another user. To change this, I moved the logic of retrieving the watched repositories and showing them in a view into a new route /:username. The :username part of the route specifies a dynamic part, which can be retrieved in the connectOutlets method:

app/lib/router.js

12345678910111213141516171819202122232425262728293031323334

require('dashboard/core');require('dashboard/github_data_source');Dashboard.Router=Ember.Router.extend({root:Ember.Route.extend({index:Ember.Route.extend({route:'/',connectOutlets:function(router){router.transitionTo('user',{username:'pangratz'});}}),user:Ember.Route.extend({route:'/:username',connectOutlets:function(router,context){// create the data source which connects to GitHub APIvardataSource=Dashboard.GitHubDataSource.create();// initialize repositoriesControllervarrepositoriesController=router.get('repositoriesController');repositoriesController.set('dataSource',dataSource);repositoriesController.set('content',[]);repositoriesController.loadWatchedRepositories(context.username);// finally add a view which renders repositories template for given controllerEmber.View.create({templateName:'repositories',controller:repositoriesController}).append();}})})});

As you can see in line #24 the username is retrieved from the context, more precisely from the route. It’s now possible to navigate to the watched repositories of another user, by simply specifying the username in the url, for example http://pangratz.github.com/dashboard/#/nokinen.

When we navigate to http://pangratz.github.com/dashboard, the state root.index is entered, which does nothing else then transition to state root.user and specifying a default username (see lines #6 to #13);

Roundup

The above changes create a new route /:username which allows the specification of the username, which shall be used for retrieving additional data. The current solution instantiates a Dashboard.GitHubDataSource every time the route is entered. This is obviously a no go and will be addressed in the upcoming changes. Also, with the current implementation, every time the route is entered, a new view is added. So now it’s really about time to use the outlet feature of the router to solve this.