如果绑定，Bootstrap CSS table-striped 不适用于淘汰赛答案

【问题标题】：Bootstrap CSS table-striped not working with knockout if binding如果绑定，Bootstrap CSS table-striped 不适用于淘汰赛
【发布时间】：2014-08-01 19:41:05
【问题描述】：

假设我有下表适用于引导 css 和淘汰赛：

<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”，显然该行会从屏幕上消失，但我根本看不到任何交替的行颜色。有人知道为什么以及如何显示交替的行颜色吗？

【问题讨论】：

标签： javascript html css twitter-bootstrap knockout.js

【解决方案1】：

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

要根据条件使整行存在/不存在，请使用 KO virtual element 包装该行：

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

原始代码示例，未正确分条：http://jsbin.com/tupusemu/1

使用虚拟元素的示例，正确分条：http://jsbin.com/tupusemu/2

【讨论】：

【解决方案2】：

只需从您的表格中删除 tbody 标记即可顺利工作..

【讨论】：