Goal of this iteration: Use outlet inside the router

Previously the view which rendered the repositories has been appended every time the route has been entered. By using the outlet feature, it allows us to connect a controller with a view and automatically.

Before I change the router, I moved the application structure from the app/index.html to the template application.handlebars. I also specified with the outlet helper, where a connected view shall be inserted (later via connectOutlet):

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

<div id="main" class="container-fluid">
  <nav class="navbar navbar-fixed-top">
    <div class="navbar-inner">
      <div class="container">
        <a class="brand" >GitHub Dashboard</a>
        <div class="nav-collapse" >
          <ul class="nav" >
            <li>
              <a href="https://github.com/pangratz/dashboard" >Show on GitHub</a>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </nav>
  <div class="row-fluid">
    {{outlet}}
  </div>
</div>

This template is specified for the Dashboard.ApplicationView. This view is added to the DOM when the router starts the routing. I also created a class Dashboard.RepositoriesView which uses the already available template repositories:

1
2
3
4
5
6
7
8
9

require('dashboard/core');

Dashboard.ApplicationView = Ember.View.extend({
  templateName: 'application'
});

Dashboard.RepositoriesView = Ember.View.extend({
  templateName: 'repositories'
});

Now, everything is setup to change the router. Inside the root.user’s connectOutlets the manual creation of the view which shows the repositories is removed. Instead we tell the router to connect the outlet inside the application template to render a RepositoriesView and set the controller on the view to be the repositoriesController. All of this can be set via a simple router.get('applicationController').connectOutlet('repositories');. Because we used the naming conventions Ember.js expects us to use, it’s automatically figured out that by calling connectOutlet('repositories') we want to connect an instance of Dashboard.RepositoriesView and use the repositoriesController. So the root.user route looks like this:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

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);

    // connect  with repositoriesController & RepositoriesView
    router.get('applicationController').connectOutlet('repositories');
  }
})

Roundup

With this change the transition to use outlet’s is complete. Finally creating views and connecting them with the controllers is all managed by the router. Very nice!!

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