knockout.js - 桌子中间的 knockout foreach

我有这样的一张桌子：

<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>

动态字段需要成为淘汰对象，以迭代对象的所有属性。我唯一想做的是：

    <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”，而是在使用一个遍历属性的自定义函数。当我尝试使用属性-我收到以下控制台错误：


未捕获的错误：绑定'foreachprop'不能与virtual一起使用
元素


这是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 };
    }
};

最佳答案

您可以使用不带容器元素的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