Question

Is there a best-practice with knockout.js and/or CSS to prevent the extra divs that get created inside a foreach loop from displaying their extra whitespace height in the browser?

Source:

<div data-bind="foreach: jobs" >
  <div data-bind="if: JobPhase.Id() == 3">
    <div data-bind="text: JobPhase.Id"></div>                            
  </div>
</div>

Result:

<div data-bind="if: JobPhase.Id() == 3"></div>
<div data-bind="if: JobPhase.Id() == 3"></div>
<div data-bind="if: JobPhase.Id() == 3"></div>
<div data-bind="if: JobPhase.Id() == 3">
  //This one matched so it will display the content.
</div>

The first three items did not match but I’m still seeing their whitespace. Thoughts?

Answer 1

In your solution divs will be rendered, and will be rendered empty, that is not really good practice.
You should use another “if” statement. Like in Example.

<div data-bind="foreach: jobs" >  
  <!-- ko if: Id == 3 -->  
    <div data-bind="text: Id"></div>                         
  <!-- /ko-->
</div>

So you will be able to create div blocks only if you need them, instead of creating them all the time.