桌子中间的淘汰赛

Question

我有一张这样的桌子：

<table>
 <thead>
  <tr>
   <td>Column 1</td><td>Column 2</td>
  </tr>
 </thead>
  <tr>
   <td>static 1a</td><td>static 2a</td>
  </tr>
  <tr>
   <td>dynamic 1b</td><td>dynamic 2b</td>
  </tr>
  <tr>
   <td>dynamic 1c</td><td>dynamic 2c</td>
  </tr>
 </table>

动态字段需要是一个淘汰赛foreach来迭代对象的所有属性。我唯一能想到的就是：

    <tbody data-bind="foreachprop: properties">
        <tr><td><span data-bind="text: propertyName"></span></td><td><span data-bind="text: value"></span></td></tr>
    </tbody>

这在技术上是可行的，但它与我的样式不符，因为静态行应该是 tbody 的一部分。我还能为每个绑定什么？我一定错过了一个简单的解决方案。

更新：我实际上并没有使用“foreach”，而是使用了一个迭代属性的自定义函数。当我尝试使用

Answer 1

您可以在没有容器元素的情况下使用foreach（文档：note 4）要处理此问题，您可以使用无容器控制流语法。你只需要一个特殊的评论行，你可以把你的foreach：

<tbody data-bind="">
   <tr>
     <td>static 1a</td><td>static 2a</td>
   </tr>
   <!-- ko foreach: properties -->
      <tr>
         <td>
             <span data-bind="text: propertyName"></span>
         </td>
         <td>
             <span data-bind="text: value"></span>
         </td>
     </tr>
   <!-- /ko -->
</tbody>

如果您使用自定义绑定foreachprop，则需要将其配置为与虚拟元素一起使用。您可以在 bindingHandlers 声明之后使用：

ko.virtualElements.allowedBindings.foreachprop = true;

您应该注意，您可能需要在自定义绑定中重写 DOM 操作逻辑以支持虚拟元素。您可以在文档中找到有关 virtualElements 助手的大量文档：Creating custom bindings that support virtual elements

Answer 2

我还意识到一个表格中可以有多个 tbody 元素。这个解决方案解决了我的问题，所以我想我会分享它，但我更喜欢 nemesv。