在 Ember 中使用多个 yields 在不同的地方显示页眉、正文、页脚

Question

如何在 Ember 中使用多个产量在不同的地方显示页眉、正文、页脚？在下面添加了示例代码以供参考。但不工作并抛出错误说，

断言失败：找不到名为“ib.footer”的助手

components/common/info-bar-footer.hbs：

{{yield}}

components/common/info-bar-header.hbs：

{{yield}}

components/common/info-bar.hbs：

<div class="info-bar" style="display: {{if isopen 'block' 'none'}}">
    <div class="info-bar-header">
        <button class="btn-close" data-dismiss="info-bar" {{action "handleCloseInfoBar"}}>x</button>
        {{yield (hash header=(component "common/info-bar-header"))}}
    </div>
    <div class="info-bar-footer">
        {{yield (hash footer=(component "common/info-bar-footer"))}}
    </div>
</div>

模板/home.hbs：

{{#common/info-bar isopen=true as |ib|}}
    {{#ib.header}}
        <p class="info-content">
            Hello, nice to see you again
        </p>
    {{/ib.header}}
    {{#ib.footer}}
        <button class="btn-default">Ok</button>
    {{/ib.footer}}
{{/common/info-bar}}

Answer 1

让我解释一下为什么会出现错误以及如何解决它。您有以下模板：

{{#common/info-bar isopen=true as |ib|}}
    {{#ib.header}}
        <p class="info-content">
            Hello, nice to see you again
        </p>
    {{/ib.header}}
    {{#ib.footer}}
        <button class="btn-default">Ok</button>
    {{/ib.footer}}
{{/common/info-bar}}

这段代码运行时；您在两者之间提供的代码块#common/info-bar - /common/info-bar将尝试为组件yield内的每个部分运行common/info-bar。所以对于第一个yield；common/info-bar生成以下 json 对象，您ib在块表单用法中将其命名为：{ header:(component "common/info-bar-header") }. 这意味着；第yield一个块的执行有一个ib不包含任何footer属性的对象。所以; 当您尝试使用ib.footer;渲染页脚组件时 引发错误，表明ib.footer未定义。

为了解决这个问题，你可以yield附加属性，以确定个体yield内小号common/info-bar。让代码说话：

<div class="info-bar" style="display: {{if isopen 'block' 'none'}}">
    <div class="info-bar-header">
        <button class="btn-close" data-dismiss="info-bar" {{action "handleCloseInfoBar"}}>x</button>
        {{yield (hash header=(component "common/info-bar-header") isHeader=true)}}
    </div>
    <div class="info-bar-footer">
        {{yield (hash footer=(component "common/info-bar-footer") isFooter=true)}}
    </div>
</div>

现在您可以在其中使用这些标记home.hbs并执行条件检查：

{{#common/info-bar isopen=true as |ib|}}
    {{#if ib.isHeader}}
        {{#ib.header}}
            <p class="info-content">
                Hello, nice to see you again
            </p>
        {{/ib.header}}
    {{/if}}
    {{#if ib.isFooter}}
        {{#ib.footer}}
            <button class="btn-default">Ok</button>
        {{/ib.footer}}
    {{/if}}
{{/common/info-bar}}

if代码块中的那些检查将确保；您将正确的内容放置到正确的yield位置。我希望这可以为您澄清问题。