ember.js 有没有办法判断一个产出的组件的has-block是否为空？

gcxthw6b 于 2022-11-05 发布在其他

关注(0)|答案(1)|浏览(135)

我正在尝试创建一个上下文组件，它可以在生成的块中没有传递一个头部时提供一个默认的头部。通常，我可以使用has-block帮助器来判断一个组件是否有块内容，但这个组件总是有块内容。我认为我需要一种方法来判断生成的组件是否有块内容。例如：

{{! panel.hbs }}
<header>
  {{yield header=(component "blank-template")}}
  {{#if (yieldedHeaderEmpty)}}
    <h1>My Default Header</h1>
  {{/if}}
</header>
<section>
  {{yield body=(component "blank-template")}}
</section>
<footer>
  {{yield footer=(component "blank-template")}}
</footer>

我只想在生成的“header”部分为空时显示默认的header。我可以创建一个header组件，然后它可以像这样使用has-block：

{{! panel.hbs }}
    <header>
      {{yield header=(component "my-header")}}
    </header>
...

 {{! MyHeader.hbs}}
     {{#if (has-block)}}
          {{yield}}
     {{else}}
         <h1>My Default</h1>
     {{/if}}

从功能上讲，我认为这是可行的，但“我的标题”组件的唯一目的是这个“面板”组件，似乎是浪费。开放的想法。谢谢！

ember.js

来源：https://stackoverflow.com/questions/65675704/is-there-a-way-to-tell-if-a-yielded-components-has-block-is-empty

1条答案

按热度按时间

o2gm4chl1#

Ember core最近接受了RFC中的“命名块”，这正是为此目的而设计的。https://github.com/emberjs/rfcs/pull/460。有了这个功能，我们可以命名可生成的块，并使用它们的名称访问它们，如：
template.hbs:

<Panel>
  <:header>This is a customized header</:header>
</Panel>

panel.hbs:

{{#if (has-block "header")}}
  {{yield to="header"}}
{{else}}
  <header> This is the default header </header>
{{/if}}

这还没有登陆到Ember内核中。幸运的是，我们有一个官方的polyfill，它支持3.12.4中的这个特性：https://github.com/ember-polyfills/ember-named-blocks-polyfill

赞(0）回复(0）举报 2022-11-05

我来回答

ember.js 有没有办法判断一个产出的组件的has-block是否为空？

1条答案

相关问题

热门标签

最新问答