How to render "post" {{outlet}} inside "posts" #each

1

What is the best way to render a “post” {{outlet}} inside a “posts” #each loop?

I can do:

{{#each untilOutlet as |post|}}
  List post
{{/each}}
{{outlet}}
{{#each fromOutlet as |post|}}
  List post
{{/each}}

and create “untilOutlet” and “fromOutlet” in the “posts” controller? Is this the best way?

2

Is there an example somewhere for me to look at?

3

How about:

{{#each posts as |post|}}
    List post
    {{#if (eq post selectedPost)}}
        {{post-detail-component model=post}}
    {{/if}}
{{/each}}

eq is from ember-truth-helpers

4

Thanks. I will try. Is there a route for each selectedPost so you can bookmark it?

5

I am testing this on

https://github.com/broerse/outlet-inside-each

How do I get selectedPost to respond to the id in the url?

6

There can be a route for each selectedPost. Put the template I provided in your post route.

You can share template code between your posts route and your post route by using a component.

// posts template

{{posts-list posts=model}} {{!-- pass model from posts route --}}

// post route

import Ember from "ember";

export default Ember.Route.extend({
    model: function(params) {
        return this.modelFor('posts').findBy('id', params.site_id);
    },
    setupController(controller, model) {
        this._super(controller, model);
        controller.set('posts', this.modelFor('posts'));
    },
});

// post template

{{posts-list posts=posts selectedPost=model}}
{{!-- pass posts from parent posts route using modelFor, selectedPost from model in post route --}}

// posts-list component template

{{#each posts as |post|}}
    List post
    {{#if (eq post selectedPost)}}
        {{post-detail model=post}}
    {{/if}}
{{/each}}
7

I don’t understand 100% yet but will try it. Thanks

8

I added the post-list component

https://github.com/broerse/outlet-inside-each/commit/360895e619b9e80e8cd09f103ec5147c256f3023

But it does not give me “Testing”.

Perhaps this DEPRECATION: You attempted to set 'posts' from '(generated post controller)', but object proxying is deprecated. Please use 'model.posts' instead. is the problem?

The component works on every route.

9

@Gaurav0 It seems selectedPost=model does not arrive in the component on a post route.

10

See my pull request and feel free to ask questions.

11

Merged your PR and it works. I understand what you did with the {{outlet}} in posts but why do we need setupController in the post route?

12

It sets the property ‘posts’ on the controller to be all the posts in the post route, so that the post route also can send posts to the posts-list component.

13

Thanks.

@abuiles is this the 101 way? It is difficult to get this as a beginner so perhaps it is something for your book.