holy moly

pangratz prattles

GitHub Dashboard #5

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
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34

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 API
        var dataSource = Dashboard.GitHubDataSource.create();

        // initialize repositoriesController
        var repositoriesController = router.get('repositoriesController');
        repositoriesController.set('dataSource', dataSource);
        repositoriesController.set('content', []);
        repositoriesController.loadWatchedRepositories(context.username);

        // finally add a view which renders repositories template for given controller
        Ember.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.

The result of this post’s changes are available at tag v0.0.5 (changes). As always, the result is deployed at code418.com/dashboard.

Comments