8

我有一张这样的桌子：

<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 };
    }
};
4

2 回答 2

14

您可以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帮助程序的大量文档：创建支持虚拟元素的自定义绑定

于 2013-05-21T19:48:39.093 回答
0

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

于 2013-05-21T19:51:13.343 回答