EMBER: Render div block only if component has yielded

Question

I have the following hbs snippet:

<div class='photo-viewer-control' local-class='leftbar'>
  {{yield to='leftbar'}}
</div>

I am consuming the leftbar component in:

<Viewer>
  <:leftbar>
    <Infos
      @image={{this.currentImage}}
    />
  </:leftbar>
</Viewer>

I want to render the div only if leftbar has yielded.

I already tried the following:

{{#if (has-block 'leftbar')}}
  <div class='photo-viewer-control' local-class='leftbar'>
    {{yield to='leftbar'}}
  </div>
{{/if}}

I added the has-block but the div is still rendering when there is no leftbar.

can you add the snippet for how you're consuming this component? thanks! — NullVoxPopuli, Jun 30 '23 at 13:58

score 0 · Answer 1 · answered Jul 02 '23 at 15:52

Your code is very close!

To avoid rendering a :leftbar, omit the block:

<Viewer>
  no left bar will be rendered
</Viewer>

here is a demo of how this works

const Viewer = <template>
  {{yield}}

  {{#if (has-block 'leftbar')}}
    <div>
      {{yield to="leftbar"}}
    </div>
  {{/if}}
</template>;

<template>
  <Viewer>
    <:leftbar>
      leftbar content
    </:leftbar>
  </Viewer>

  <Viewer>
    no leftbar content
  </Viewer>
</template>

(this demo uses the new "gjs" format -- tutorial here, if unfamiliar: https://tutorial.glimdown.com )

EMBER: Render div block only if component has yielded

1 Answers1