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无法控制 em> content 将存在与否。（这不是文档中可能的清晰，但它，主要在＆＃34;注意：使用“if”没有容器元素＆＃ 34; 位）。因此，您的示例中的if将控制tr的内容是否存在，但tr无论如何都会在那里，为您提供{{1}绝对没有任何东西，它作为Bootstrap条带所做的tr工作的一部分，但不占用任何垂直空间。（您可以通过渲染页面，然后右键单击表格并使用＆＃34; Inspect element＆＃34;在任何现代浏览器中查看DOM中的实际内容来查看此内容。）

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

:nth-child

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

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

Answer 2

只需从表中删除 tbody 标记即可顺利运行..

如果绑定，Bootstrap CSS表条带不能与knockout一起使用

2 个答案: