淘汰赛在桌子中间

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",我正在使用迭代属性的自定义函数.当我尝试使用<! - ko foreachprop:>属性时 - 我收到以下控制台错误:

未捕获错误:绑定'foreachprop'不能与虚拟元素一起使用

这是foreachprop函数

ko.bindingHandlers.foreachprop = {
    transformObject: function (obj) {
        var properties = [];
        for (var key in obj) {
            if (obj.hasOwnProperty(key)) {
                var newObj = obj[key];
                newObj.propertyName = key;
                properties.push(newObj);
            }
        }
        return properties;
    },
    init: function (element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) {
        var value = ko.utils.unwrapObservable(valueAccessor()),
            properties = ko.bindingHandlers.foreachprop.transformObject(value);
        ko.applyBindingsToNode(element, { foreach: properties });
        return { controlsDescendantBindings: true };
    }
};

Answer 1

您可以在foreach没有容器元素的情况下使用(文档:注释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帮助程序的大量文档:创建支持虚拟元素的自定义绑定