Sukima3rd March 2021 at 8:42pm
It is possible now to yield different sections in a single component. Your wrapping component will yield a specially crafted hash which references a dummy component.
For example the dummy component foo-content
:
{{yield}}
And an example wrapper component foo-wrapper
:
<div class="foo-wrapper">
<div class="foo-wrapper__foo-a">
{{yield (hash a=(component "foo-content"))}}
</div>
<div class="foo-wrapper__foo-b">
{{yield (hash b=(component "foo-content"))}}
</div>
<div class="foo-wrapper__foo-c">
{{yield (hash c=(component "foo-content"))}}
</div>
</div>
Would provide you (the consumer) with this syntax:
{{#foo-wrapper as |foo|}}
{{#foo.a}}This is the Foo A component{{/foo.a}}
{{#foo.b}}This is the Foo B component{{/foo.b}}
{{#foo.c}}This is the Foo C component{{/foo.c}}
{{/foo-wrapper}}