Ember Routes vs Controllers vs Views

Update: Not all of this information will be correct for Ember 2. As far as I know Ember 2.0 will only use Components.

How Various Components of Ember.js Fit Together

Model

A Model takes care of interacting with a data store. An example of data store can be a RESTful server or Localstorage.

Template

A Template takes care of building HTML from data available to its Controller and View. A Controller in turn has access to a Model.

Controller and View

Controllers and Views are very similar and both act on user generated events. A Controller is supposed to take action on semantic events like submit and a View is supposed to take action on interaction events like focus or click.

Router

Ember has a single Router. Router links urls to Routes. For example users/:user_id to users.show route or UsersShowRoute.

Route

Each Route, when activated, takes care of unpacking a url to an state. For example users/:user_id requires a user to be logged in in order to see a friends profile. A Route makes sure a user is logged in and takes care of state of being logged in.

A Route fetches information from data store. For example users/pekhee will fetch pekhee user from a data store and give it to Controller and View.

A Route dynamically chooses what Controller and View it needs or how many of them it needs.

A Route manages state of an application and how that state should be represented. However Models take care of managing state of application for Route and Controllers/Views take care of managing nitty gritty details of its representation.

Keep Logic as Relevant and as Local as Possible: Some Notes

• If your logic doesn’t care about any context or model put it in activate callback of route.
• If a piece of logic only needs to know model put it in afterModel callback of route.
• If it needs to know context of Controller or interact with semantic meaning of a resource put it in a controller.
• If it needs to know context of View or interact with representation of a resource put it in a view.
• If it needs to know both contexts or interact with both semantic and presentation of a resource first give the event to a view then escalate it to a controller.

Examples

When more than one Controllers work with one Model, keep semantic actions on highest possible Route in the chain otherwise keep logic in most local Controller.

Keep animation related code in View and use Liquid Fire.

Sometimes each user has a lot of posts and each post has a lot of comments. Try to have a Route return relevant user. Then ask relevant user for posts in PostsRoute and after that try to ask for relevant comments in CommentsRoute. This keeps logic as local as possible. You comments route doesn’t need to know how you retrieve a user.