css - 带有 if 的 knockout.js 数据绑定循环

Question

是否有使用 knockout.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 块，而不是一直创建它们。