Looks like you’re on the right track but I see a couple issues here:
- you have currentUser defined twice, once as an injected service and once as a computed property. You could rename the CP, or you could rename the service (e.g.
currentUserService: service('current-user')
or something like that).
- you’re using “beforeModel” which is only fired on a route (nothing to stop you from defining a beforeModel hook on a controller, but it won’t be fired automatically and it doesn’t make a lot of sense as the model hooks are all handled on the route.
- think sessionAuthenticated is overriding the ‘AuthenticatedRouteMixin’ from simple auth, which should be done on the application route, not the application controller
A brief overview of the difference between routes and controllers and what you should use them for:
- Route: should be used to handle fetching the data for the view and handling any transition-related items
- Controller: should basically be used to expose things to the template and handle actions (though the route can handle actions as well)
So let’s say you have a view for displaying a list of users. You’d probably call it “users”. So you’d have an entry in your router.js. Then you’d have a “users” route aka routes/users.js
. Then you’d have a template which renders that route in /templates/users.hbs
. Those two files would be generated if you ran ember g route users
for example. The controller is optional (Ember automagically creates one and injects the model into it if you don’t specify one). If you wanted to have some CPs that the template uses, like say sorting the list of users by last name, you could define them on the controller, and then use those CPs in the template. The controller could also handle any actions you define, like maybe changing the sort field or adding a new user. To generate a blank controller for users you’d just run ember g controller users
.
In the above users example, you’d typically fetch the users data from your API in the route’s model hook (let’s say you returned this.store.findAll('user')
from the model hook), and then the model would be automatically injected on the controller as model
. Then in the controller if you wanted to sort the users, for example, you could say:
...
sortDef: ['last_name:desc'],
sortedUsers: computed.sort('model', 'sortDef'),
...
Then in your template you could render the users with something like:
{{#each sortedUsers as |user|}}
<li>{{user.first_name}} {{user.last_name}} - {{user.email}}</li>
{{/each}}
So in the above example you use the route to fetch the data, the controller to munge the data and/or add some more state, and then the template to render things that are defined on the controller, extra markup, etc.
As for what makes sense to put in the application route/controller/model? In the route you’d probably want to do any application-level setup, fetch any “global” data, handle global app errors, or what have you. In the controller you’d want to define any properties or inject any services that the application template will need (like in the original post) and then in the template you’d typically render global application markup, like navbars or headers/footers that belong on every page, etc.