Routes and components are two of the most foundational concepts in Ember. Generally, the route supplies the data for the component to consume and display. Tomorrow we will take a look at components in some detail. Today let's look at getting data from the route to a component.

As we saw earlier, Ember has controllers that get a model from the route and make that model available in a corresponding template. This is the current flow, however, that is not going to be the case for long. Ember is moving away from controllers and toward a system of routable components. Essentially, you should be able to tell your route what component it should render and your route can provide that component with data rather than dealing with a controller and its template. However, this is still in the works and as a result, controllers are still a necessary intermediary.

Even though Ember still has controllers, most of our UI work should probably still be built by way of components. Components should generally be isolated from their outer context, only having access to the data that we explicitly pass in. Also, our component should not modify our data. It is better to let changes happen in upstream so we have only one place where our data changes. When we render a component we should pass in all data and change that data by triggering an action on our route. It might look like this:

{{example-component someComponentProperty=someOuterProperty someComponentMethod=(action 'someOuterAction')}}

The action can be invoked in the component's JavaScript by calling it like any other property.


This is an example of a closure action. It is effectively just calling a function that belongs to the parent inside the child component. Because it is just a plain function, a closure action can have a return value which is useful when sending data to a parent to be modified or when initializing values based on input to the component.

Now we have seen how to render a component. Tomorrow we will look at the lifecycle hooks of Ember components.