Ember components with itemController

Question

I have 1 timeline on route posts with 2 types of post: from facebook and from twitter, both with same controller: post with 2 methods: isFacebook and isTwitter.

There's a component for each type of post and an 'post-index' with use this 2 methods to redener the correct component.

Route post with default ArrayController:

 <ul class="timeline">
  {{#each post in model itemController="posts.post"}}
    <li> {{post-index post=post}} </li>
  {{/each}}
</ul>

post-index

{{#if post.isFacebook}}
   {{post-facebook post=post}}
{{/if}}

{{#if post.isTwitter}}
    {{post-twitter post=post}}
{{/if}}

{{yield}}

The problem is when I try render a single post in route post.post with post-index template route:

export default Ember.Route.extend({
    setupController(controller, model) {
        this._super(controller, model);
        controller.set('model', model);
  }
});

template:

 <ul class="timeline">
     {{#each post in model}}
         <li> {{post-index post=post}} </li>
      {{/each}}
 </ul>

My route posts only works because it have itemController="posts.post" but post.post don't. What I supposed to do ?

Answer 1

If I understand your question correctly, you are wondering how to pass the post itself to the post to the post property of post-index.

If so, you can modify your code as follows:

 <ul class="timeline">
     {{#each post in model}}
         <li> {{post-index post=this}} </li>
      {{/each}}
 </ul>

The only change is to change post to this. Since you are in an each block this will pass the item for the current iteration.