templates - EmberJS 多产量助手

Question

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

例如：

布局.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 中的视图的原因是能够集中和扩展视图，这使我能够将所有视图中的共同点保存在一个地方......

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>

Answer 2

我认为您应该为此使用命名的网点

http://emberjs.com/guides/routing/rendering-a-template/

Answer 3

像这样的东西应该工作：

布局.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" />
        {{view "view.secondView"}}
    </div>
</div>

应用程序.js

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

App.MyExtendedDoubleDecker = App.MyDoubleDeckerView({
    templateName:"myTemplate", 
    secondView: Ember.view.extend({
        templateName: "mySecondTemplate"
    });
});

换句话说，调用view.secondView模板中给出的视图。然后，secondView在您的类或子类中设置该属性。

你可以添加一些语法糖

App.viewForTemplateName = function(templateName) {
    return Ember.View.extend({
        templateName: templateName
    });
};

然后，在您上面的视图定义中，执行

secondView: App.viewForTemplateName('mySecondTemplate')