Yield complete block in ember

Question

I wondered how I can yield the complete block which I pass to my component. I already found this https://guides.emberjs.com/v2.9.0/components/block-params/ but I don't understand why there is

//my-component.hbs
{{#if hasBlock}}
  {{yield post.title}}
  {{yield post.body}}
  {{yield post.author}} ...

Why I have to name what I want to yield? That makes no sense because I want to yield (display) the whole block which I pass to the component, regardless what I do there.

So I tried just to use yield only:

//my-component.hbs
{{#if hasBlock}}
  {{yield}} ...

and use the component this way:

//myroute.hbs
{{#my-component car=model}}
  {{car.name}} - {{car.color}}
{{/my-component}}

This doesn't work, but I expected that 'car.name - car.color' will be rendered in the {{yield}} of the component...

Can someone explain me this, please?

Have you tried ember-twiddle.com that's awesome for learning ember and reproducing specific issues and asking for clarification. there is more chance for you to get what exactly you need. — Ember Freak, Oct 27 '16 at 14:35

Steve H. · Accepted Answer · 2016-10-27T14:43:39.067

0

This is a bit confusing, I admit. What is happening is the component is yielding (returning) values that you can use in your block. Try something like this:

{{#my-component car=model as |car|}}
    {{car.name}} - {{car.color}}
{{/my-component}}

Then in your component:

{{#if hasBlock}}
    {{yield car}}
{{else}}
    default no-block template goes here...
{{/if}}

Here's a working twiddle: https://ember-twiddle.com/9a0efb92ebea6f206236a32e3c3e6053?openFiles=templates.index.hbs%2Ctemplates.components.my-component.hbs

edited Oct 27 '16 at 14:43

answered Oct 27 '16 at 14:37

Steve H.

6,912
2
30
49

thanks for answer. So is this a kind of security, meaning I can only use values and models which are defined in the yield? – Benny Alex Oct 28 '16 at 07:01
Sorry, just saw this question. Not really a security concern. The design concept behind components is that they do not have any context- they are unaware of the current model. To ensure re-usability, all data must be injected into a component from the route. – Steve H. Nov 15 '16 at 16:38

Yield complete block in ember

1 Answers1