javascript - 如果绑定(bind)，Bootstrap CSS table-striped 不能与 knockout 一起使用

Question

假设我有下表，可与 bootstrap css 和 knockout 一起使用:

<table  style="cursor:pointer;" class="table table-striped table-bordered table-hover table-condensed">
   <tbody data-bind="foreach: items">
         <tr>
            <td data-bind="text: name"></td>
         </tr>
         <tr data-bind="if: somecondition">
             <td>test</td>
         </tr>
   </tbody>

</table>

现在，如果我设置 "somecondition" 返回 "true"，我可以看到结果表有斑马条纹。一切安好。但是如果我将条件更改为“false”，显然该行会从屏幕上消失，但我根本看不到任何交替的行颜色。任何人都知道为什么以及如何显示交替行的颜色？

Answer 1

问题是 Knockout if binding不控制其在 上的元素是否存在，只是控制该元素的内容 是否存在。 (这在文档中可能不是很清楚，但它是，主要是在 “注意:在没有容器元素的情况下使用“if”” 位).因此，您示例中的 if 将控制 tr 的 content 是否存在，但 tr 将是无论如何，给你一个 tr 里面什么都没有，这算作 :nth-child 工作的一部分，Bootstrap strip 化所做但不占用任何垂直空间。 (您可以通过呈现页面，然后右键单击表格并在任何现代浏览器中使用“检查元素”来查看 DOM 中的实际内容来查看这一点。)

要根据条件使整行存在/不存在，用 KO virtual element 包裹行:

<!-- ko: if: somecondition -->
<tr>
    <td>test</td>
</tr>
<!-- /ko -->

您的原始代码示例，未正确 strip 化:http://jsbin.com/tupusemu/1

使用虚拟元素的示例，正​​确 strip 化:http://jsbin.com/tupusemu/2