templates - EmberJS 多产量助手

Question

我有一个在 Ember 中创建的自定义 View 。我真的很喜欢 {{yield}} helper 让我控制三明治的“面包”。但是，我现在想要做的是创建一个“双层”三明治，并有一个超过 1 个产量的 View ，或者至少能够参数化在第二个产量中使用哪个模板。

所以例如:

布局.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>

应用程序.js

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

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

有没有办法做这样的事情？我喜欢 ember 中的 View 的原因是能够集中和扩展 View ，这使我能够将所有 View 中的共同事物保存在一个地方......

Answer 1

从 Ember 3.25 开始，您可以使用所谓的“命名块”(请参阅​​ https://api.emberjs.com/ember/release/modules/@glimmer%2Fcomponent 的传递多个块小节)。
示例组件:

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

然后像这样使用它:

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