使用模板节点绑定时，根据对我的列模型的更改导致 re-draw 数据列被淘汰

Question

我的问题场景几乎与 this one 相同，但我正在绘制的 table 具有具有更复杂绑定的 TD 单元格，每个绑定对于被绑定的列都是唯一的。有时只是 HTML 是独一无二的。

换句话说，使用 databind=foreach 循环列并简单地嵌套一个执行 text 绑定的是不够的。

我可以让我的 table 在初始页面绘制时呈现，使用 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。因此，您可以想象，当我允许用户更新列模型时，只有我的 header 标签在中发生变化，但数据列不会更新。

我该怎么办？

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 绑定：

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

使用模板节点绑定时，根据对我的列模型的更改导致 re-draw 数据列被淘汰

Cause Knockout to re-draw data columns based on changes to my column model when using tempate nodes binding

knockout.js

knockout-3.0