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

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.