This page is part of a static HTML representation of TriTarget.org at https://tritarget.org

Ember multiple yields in contextual components

Sukima 3rd 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}}

Here is a working demo.