时间戳

首页 > 解决方案 > 在 Ember 中使用多个 yield 在不同位置显示页眉、正文、页脚

ember.js - 在 Ember 中使用多个 yield 在不同位置显示页眉、正文、页脚

问题描述

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

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

组件/common/info-bar-footer.hbs：

{{yield}}

组件/common/info-bar-header.hbs：

{{yield}}

组件/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}}

标签： ember.jshandlebars.js

解决方案

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

{{#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位置。我希望这可以为您澄清问题。

推荐阅读