EmberJS multiple yield helper

Question

I have a custom view that I've created in Ember. I really love the {{yield}} helper to allow me to control the 'bread' of the sandwich. However, what I'd like to do now, is create a 'double decker' sandwich, and have a view with more than 1 yield in it, or at the very least be able to parameterize which template to use in the 2nd yield.

so for example:

layout.hbs

<div>
    <div class="header">Header Content</div>
    <div class="tab1">
        Tab 1 Controls.
        <input type="text" id="common1" />
        {{yield}}
    </div>
    <div class="tab2">
        Tab 2 Controls.
        <input type="text" id="common2" />
        {{yield second-template}} or {{template second-template}}
    </div>
</div>

app.js

App.MyDoubleDeckerView = Ember.View.extend({
    layoutName:"layout',
    templateName:"defaultTemplate", 
    "second-template":"defaultSecond"
});

App.MyExtendedDoubleDecker = App.MyDoubleDeckerView({
    templateName:"myTemplate", 
    "second-template":"mySecondTemplate"
});

is there any way of doing something like this? What I love about the views in ember is the ability to centralize & extend views which allows me to keep the things that are common among all the views in one place...

Answer 1

As of Ember 3.25 you can use so called "named blocks" (see the Passing multiple blocks subsection of https://api.emberjs.com/ember/release/modules/@glimmer%2Fcomponent).

Example component:

<h1>{{yield to="title"}}</h1>
{{yield}}

and then use it like this:

<PersonProfile @person={{this.currentUser}}>
  <:title>{{this.currentUser.name}}</:title>
  <:default>{{this.currentUser.siganture}}</:default>
</PersonProfile>