knockout.js data-bind loop with if

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?

I actually think it was something else that was causing it.

Adam Levitt
– Adam Levitt

2012-05-19 03:53:13 +00:00
Commented May 19, 2012 at 3:53 — Adam Levitt
– Adam Levitt, Commented May 19, 2012 at 3:53

Dmitry Zaets · Accepted Answer · 2014-05-07 08:07:35Z

3

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.

edited May 7, 2014 at 8:07

answered May 19, 2012 at 12:26

Dmitry Zaets

3,2871 gold badge23 silver badges33 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

knockout.js data-bind loop with if

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related