自定义绑定（？），将一些标准的 Knockout 绑定添加到子节点

Question

我想使用 Knockout 实现一些易于重用的东西（可能是自定义绑定），它可以应用标准绑定的混合：foreach 绑定到 tbody 节点和另一个标准绑定（visible 和 @ 987654324@) 到它的tr 子节点。

AFAIK，实现它的最佳方法是编写自定义绑定。
我想这样使用它：

<table>
    <tbody data-bind="tableRows: { rows: unfilteredItems, filter: rowFilter }">
        <tr data-bind="possibly, some hard coded bindings including visible and css bindings">...</tr>
    </tbody>
</table>

，其中unfilteredItems 和rowFilter 是一些observables。

我希望自定义绑定将其“转换”为以下内容，并让 KO 处理它，就像它最初在布局中一样：

<table>
    <tbody data-bind="foreach: unfilteredItems">
        <tr data-bind="visible: rowFilter($data), css: rowClass($data), and now hard coded bindings, if any">...</tr>
    </tbody>
</table>

这里rowClass()是组件中包含的一个函数，它只返回一个字符串，该字符串应该基于当前$data附加到tr的class属性。

我知道如何将foreach 绑定应用到我的绑定所应用到的节点：

ko.bindingHandlers.tableRows = {
    init: function (element, valueAccessor, allBindings, viewModel, bindingContext) {
        var options = valueAccessor(),
            rows = options.rows;

        ko.applyBindingsToNode(element, { foreach: rows }, bindingContext);
    }
};

这部分工作完美。

但我找不到任何地方如何将绑定添加到子 tr 节点，以便当 foreach 绑定处理子节点时，该绑定（以及已包含在子节点中的所有绑定） layout) 以与最初在布局中相同的方式应用和处理。

我可以尝试使用 JS DOM API 在 init 函数中手动将所需的绑定作为字符串添加到子 tr 节点，但我觉得它应该是使用一些 KO API 的更清洁的解决方案。

另外，当 tr 节点上最初有另一个绑定（包括 visible 和 css 绑定）时，我需要自定义绑定来正确处理情况。

我的项目使用 Knockout 2.2.1，如果可能的话，如果解决方案不依赖 Knockout 3 功能，那就太好了。

有人可以建议如何实现吗？

Answer 1

我认为您应该能够使用jQuery's data 或类似方法修改foreach 内部元素的data-bind 属性。外部将在其内部部分之前由 Knockout 处理。我自己没有尝试过这样的事情。

事实上，由于您只是在进行样板重写，因此您可以在应用 Knockout 绑定之前使用 jQuery 来查找和重写标签。这将为您节省自定义绑定处理程序。

Answer 2

您可以为foreach 绑定创建自己的tr 模板

<script type="text/html" id="rowTemplate">

    <tr data-bind="css:{'success': $root.rowClass($data)}, visible: $root.rowFilter($data)">
        <td data-bind="text: name"></td>
    </tr>

</script>

并在您的自定义绑定中呈现为

ko.applyBindingsToNode(element, {template:{foreach: data, name: "rowTemplate"}}, bindingContext);
return { controlsDescendantBindings: true };