Awesome

ember-named-yields

This should not be used, we now have Named Blocks https://guides.emberjs.com/release/components/block-content/#toc_named-blocks

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

Demo

Install

ember install ember-named-yields

Usage

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.

Consume

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}}

Caveats

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

Advanced

Topics beyond the basic usage.

Context

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}}

Dynamic Yield Blocks

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.

Appending

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.

Contribute

See the CONTRIBUTING.md.