挖空.js数据绑定循环与 if

Question

是否有淘汰.js和/或CSS的最佳实践来防止在foreach循环中创建的额外div在浏览器中显示其额外的空格高度？

源：

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

结果：

<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>

前三个项目不匹配，但我仍然看到它们的空格。 思潮？

Answer 1

在您的解决方案中，div 将被呈现，并且将被呈现为空，这不是真正的好做法。您应该使用另一个"if">语句。就像在例子中一样。

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

因此，您只能在需要时创建div 块，而不是一直创建它们。