Goal of this iteration: Move to Ember.Router

It’s time to move to the Ember.Router functionality, which has been recently made available in Ember.js. The goal of this iteration is to simple convert the current codebase so it uses the router. No new features in this post.

Accompanying to the new Ember.Router an Ember.Application instance now has the method initialize. This will instantiate all controllers on the application’s namespace and makes them available on the router. In order that this will work, you also have to create an ApplicationController and an ApplicationView:

1
2

Dashboard.ApplicationController = Ember.Controller.extend();
Dashboard.ApplicationView = Ember.View.extend();

The next step is to define the router: currently there is not much functionality so showing the watched repositories will be available in the route /. For such setup stuff, the connectOutlets method on a route is used. It allows you to setup all conditions to serve the specific route. In the case of the GitHub Dashboard, the connectOutlets method will basically contain the code taken from the main.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

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) {
        // 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('pangratz');

        // finally add a view which renders repositories template for given controller
        Ember.View.create({
          templateName: 'repositories',
          controller: repositoriesController
        }).append();
      }
    })
  })
});

The main.js as the entrance point to the application has now nothing more to do, than to initialize the application:

1
2
3
4
5

require('dashboard/controller');
require('dashboard/view');
require('dashboard/router');

Dashboard.initialize();

Roundup

The changes described in this post move the assembly logic and setup stuff to the Ember.Router. Currently no special features of the router like using outlet’s have been used. The goal of this iteration was purely to transition to router :) The current connectOutlets is far from how it should be used, but this will be topic on the upcoming posts.

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