A stop-gap for the named yields RFC and based off the experimentation here.

Demo

ember install ember-named-yields

Setup the named yields in your component template:

{{named-yield 'header'}}

{{yield (hash
  header=(component 'block-for' 'header')
  footer=(component 'block-for' 'footer'
    args=(hash name='footer')
  )
)}}

{{named-yield 'footer'}}

The {{yield}} is the body yield in this example.

Now to use this component:

{{#custom-card as |yields|}}
  Body content anywhere in the main block

  {{#yields.header}}
    Header content here
  {{/yields.header}}

  {{#yields.footer as |args|}}
    {{capitalize args.name}} content here
  {{/yields.footer}}
{{/custom-card}}

This named yield implementation adds extraneous DOM elements to make this work, so keep that in mind when using this addon.

Topics beyond the basic usage.

Both named-yield and block-for components take a second positional param which is "optional" since we fallback to a private API, i.e. parentView. If you don't want to use the private API, set the context manually.

{{named-yield 'header' this}}

{{yield (hash
  header=(component 'block-for' 'header' this)
  footer=(component 'block-for' 'footer' this)
)}}

{{named-yield 'footer' this}}

To allow more control to the end user, e.g. dynamically set the block to yield to.

{{yield (hash
  for=(component 'block-for')
)}}

And can be used like so:

{{#my-card as |yields|}}
  {{#yields.for 'header'}}
    Header
  {{/yields.for}}
{{/my-card}}

Which allows using concat or other helpers to dynamically set the name.

By default if you call a block-for multiple times, it overwrites the previous content. Sometimes you might want to append to the previous content.

{{#yields.header append=true}}
  A
{{/yields.header}}

{{#yields.header append=true}}
  B
{{/yields.header}}

Now the header will have 'AB' as it's contents.

See the CONTRIBUTING.md.