Использование нескольких выходов в Ember для отображения верхнего, нижнего и нижнего колонтитула в разных местах - PullRequest
Новая
       25

Использование нескольких выходов в Ember для отображения верхнего, нижнего и нижнего колонтитула в разных местах

0 голосов
/ 18 декабря 2018

Как использовать несколько выходов в Ember для отображения верхнего, нижнего и нижнего колонтитула в разных местах?Ниже приведен пример кода для справки.Но не работает и выдает ошибку:

Утверждение не выполнено: не найден помощник с именем "ib.footer"

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

{{yield}}

компоненты / общие / 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>

templates / 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}}

1 Ответ

0 голосов
/ 18 декабря 2018

Позвольте мне объяснить, почему вы получаете ошибку и как ее исправить.У вас есть следующий шаблон: 

{{#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 s в 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 месте.Я надеюсь, что это прояснит проблему для вас.

...