Блог

Я пытаюсь создать контекстный компонент, который может предоставлять заголовок по умолчанию, когда он не передается в полученном блоке. Обычно я мог бы использовать помощник 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>
 

Я хочу, чтобы заголовок по умолчанию отображался только тогда, когда полученный раздел «заголовок» пуст. Я мог бы создать компонент заголовка, который затем мог бы использовать has-блок следующим образом:

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



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

Функционально я думаю, что это сработает, но единственное назначение компонента «my-header» было бы предназначено для этого компонента «panel» и кажется расточительным. Открыт для идей. Спасибо!

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. К счастью, у нас есть официальное заполнение, которое поддерживает эту функцию 3.12.4 : https://github.com/ember-polyfills/ember-named-blocks-polyfill