When do you use yield in components?

Question

I'm curious as to how other devs use {{yield}} in components. In my case, I rarely use it. I just usually pass what I would like to {{yield}} into an attribute. I only use {{yield}} when I want the component to act like a web component (which doesn't happen very much).

Any of you guys have like a rule/best practice on when to use {{yield}}?

this is also a tangentially useful / relevant answer http://stackoverflow.com/a/30107261/1396904 — andorov, Apr 20 '16 at 17:07

score 3 · Accepted Answer · edited May 23 '17 at 11:45

3

Don't use {{yield}} if you don't feel any need for it. :)

The benefits of using {{yield}} are:

You can pass Handlebars-generated HTML, not just a string.
Thus, you can use Ember components.
The context of the passed block belongs to the parent, not to the component that yields. It's super handy.

The natural use for {{yield}} is to decorate a template block with some HTML.

Note that, using this trick, you can pass multiple blocks into a component and yield them in different parts of the component's HTML.

edited May 23 '17 at 11:45

Community

1
1

answered Mar 12 '16 at 23:54

Andrey Mikhaylov - lolmaus

23,107
6
84
133

Hah! I never knew that we could do multiple yields. I guess that makes it more useful that I thought. Thanks for that. – Mikko Paderes Mar 13 '16 at 03:18

score 1 · Answer 2 · answered Mar 11 '16 at 12:46

Use yield if you want to use your components in a block form with dynamic content. This is usually useful for example to wrap a area multiple times the same way.

A good example is a input wrapper, that provides some tags and css fun, as well as showing the label, but you yield where you want to put an {{input}} or an <select>

When do you use yield in components?

2 Answers2