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”，我正在使用迭代属性的自定义函数。当我尝试使用＆lt;！ - ko foreachprop：＆gt;属性 - 我收到以下控制台错误：

未捕获错误：绑定'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 };
    }
};

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。

淘汰赛在桌子中间

2 个答案: