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 |
|
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 |
|
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 |
|
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.