How does Ember choose how to hide an element?


I’ve been looking at one of our clients code and noticed something about Ember.

In some cases it appears it uses CSS to hide template elements (display: none!) but in other cases it actually removes the DOM element.

Here’s some evidence from Potus Dashboard:

Template code:

{{#if showPotus}}
  {{potus-dashboard model=model stats=stats rate=(route-action 'showLogin')}}

Actual rendered HTML when showPotus is false:

<div id="ember8" class="potus-dashboard ember-view" style="display: none;"> SNIP</div>

“SNIP” btw contains a lot of HTML

The former came as a surprise to me! And I suspect this is not helpful in this case, so I’d like to change it because it’s causing an undesirable scroll on mobile.

An alternate scenario is in TLP, as an example:


{{#if showSelected}}
    <br><img src={{buffered.image_url}} class="select-thumbnail-preview">

HTML when showSelected is false


So in the first case, it inserts all the complex HTML, but in the second, it doesn’t even insert it … I’d like to reproduce the latter in the first scenario if possible if only to see if the issue goes away.

Does anyone know how/if this might be influenced? Is it simply that in the first instance the nested element is a component so Ember simply chooses to modify the div’s styling? Perhaps this is too low level and we do not have control, but interesting nonetheless!

No doubt this was probably a performance choice for Ember to prevent large amounts of DOM elements being added removed on toggle …

Does the condition being false on first render change anything?

Yeah, I was thinking about that, unfortunately in the case of Potus, the dashboard is shown by default. It’s only when you change to using the search that you want to hide it.