Question

我的问题场景几乎与this one完全相同，但我正在绘制的表格中包含更复杂绑定的TD单元格，每个绑定对绑定的列都是唯一的。有时它只是HTML的独特之处。

换句话说，使用databind=foreach循环列并且简单地嵌套＆lt; TD＆gt;是不够的。它会进行text绑定。

我可以让我的表在初始页面绘制时使用template{nodes:xxx}绑定进行渲染，我在其中传入一个DOM节点数组。像这样：

    <table>
        <thead>
            <tr>
              <!-- ko foreach: ColumnModel.VisibleColumns -->
                <th data-bind="click:$root.ColumnModel.ColumnSortClick,text:ColName"></th>
              <!-- /ko -->
            </tr>
        </thead>
        <tbody>
            <!-- ko template: { nodes: ColumnModel.getRowTmplNodes(), foreach: DataItems} -->
            <!-- /ko -->
        </tbody>
    </table>

文档说明传递给此变量的DOM节点不允许是observableArray。因此，您可以想象，当我允许用户更新列模型时，只有我的标题标签在＆lt; THEAD＆gt;中更改，但数据列不会更新。

我该怎么办？

Answer 1

使用自定义敲除绑定described originally here by Michael Best

解决

<强> HTML：

<table>
    <thead>
       <tr>
        <!-- ko foreach: ColumnModel.VisibleColumns -->
          <th data-bind="click:$root.ColumnModel.Column_Click" style="cursor:pointer;"><span data-bind="visible:SortDirection,css:IconClass" style="font-size:small"></span><span data-bind="text:ColName"></span></th>
        <!-- /ko -->
       </tr>
    </thead>
    <tbody data-bind="foreach:{data:DataItems,as:'thg'}">
       <tr data-bind="nodes: $root.ColumnModel.getRowTemplate()"></tr>                
    </tbody>
</table>

KO BINDING：

//THANK YOU, MICHAEL BEST:
ko.bindingHandlers.nodes = {
    init: function () {
    return {controlsDescendantBindings: true};
    },
    update: function (element, valueAccessor, allBindings, viewModel, bindingContext) {
    var nodes = ko.unwrap(valueAccessor());
    ko.virtualElements.setDomNodeChildren(element, nodes);
    ko.applyBindingsToDescendants(bindingContext, element);
    }
};
ko.virtualElements.allowedBindings.nodes = true;

原因当使用tempate节点绑定时，Knockout根据对我的列模型的更改重新绘制数据列

1 个答案: