Named Yields for Ember Components
npm install ember-named-yieldsA stop-gap for the [named yields RFC] and based off the experimentation [here].
![Ember Version][ember-version]
[![Ember Observer Score][ember-observer-badge]][ember-observer-url]
[![NPM][npm-badge-img]][npm-badge-link]
[![Build Status][travis-badge]][travis-badge-url]
[Demo]
``no-highlight`
ember install ember-named-yields
Setup the named yields in your component template:
`hbs
{{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:
`hbs
{{#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 fallbackparentView
to a private API, i.e. . If you don't want to use the private API, set the context manually.
`hbs
{{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.
`hbs`
{{yield (hash
for=(component 'block-for')
)}}
And can be used like so:
`hbs`
{{#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.
`hbs
{{#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].
[named yields RFC]: https://github.com/emberjs/rfcs/pull/72
[here]: https://github.com/knownasilya/ember-yielded-portals
[Demo]: http://knownasilya.github.io/ember-named-yields/
[CONTRIBUTING.md]: CONTRIBUTING.md
[npm-badge-img]: https://badge.fury.io/js/ember-named-yields.svg
[npm-badge-link]: http://badge.fury.io/js/ember-named-yields
[travis-badge]: https://travis-ci.org/knownasilya/ember-named-yields.svg
[travis-badge-url]: https://travis-ci.org/knownasilya/ember-named-yields
[ember-observer-badge]: http://emberobserver.com/badges/ember-named-yields.svg
[ember-observer-url]: http://emberobserver.com/addons/ember-named-yields
[ember-version]: https://embadge.io/v1/badge.svg?start=2.3.0