Sometimes, especially when nesting resources, we find ourselves needing to have some kind of connection between two controllers. Let’s take this router as an example:
Router.map(function() {
this.route('post', { path: '/posts/:post_id' }, function() {
this.route('comments', { path: '/comments' });
});
});
If we visit a /posts/1/comments
URL, our Post
model will get
loaded into a PostController
‘s model, which means it is not directly
accessible in the CommentsController
. However, we might want to display
some information about it in the comments
template.
To do this, we inject the PostController
into the
CommentsController
(which has the desired Post
model).
export default Ember.Controller.extend({
postController: Ember.inject.controller('post')
});
Once comments has access to the PostController
, a read-only alias can be
used to read the model from that controller. In order to get the
Post
model, we refer to postController.model
:
export default Ember.Controller.extend({
postController: Ember.inject.controller('post'),
post: Ember.computed.reads('postController.model')
});
<h1>Comments for {{post.title}}</h1>
<ul>
{{#each model as |comment|}}
<li>{{comment.text}}</li>
{{/each}}
</ul>
For more information about aliases, see the API docs for aliased properties. If you have more extensive “data sharing” needs across your app, see the services page, which largely replaces injected controllers.