gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-12-02 05:42:55 25 4
gpt4 key购买 nike

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

Assertion Failed: A helper named "ib.footer" could not be found



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

最佳答案

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

{{#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在您的 block 格式中使用: { header:(component "common/info-bar-header") } .这意味着;第一个 yield 的 block 执行有一个 ib根本不包含任何 footer 的对象属性(property)。所以;当您尝试使用 ib.footer 呈现页脚组件时;引发错误,指示 ib.footer没有定义。

为了解决这个问题,您可以 yield用于识别个人的附加属性 yieldcommon/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地方。我希望这可以为您澄清问题。

关于ember.js - 在 Ember 中使用多个 yield 在不同位置显示页眉、正文、页脚,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53834098/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com