自定义绑定(?)，它向子节点添加了一些标准的Knockout绑定 [英] Custom binding(?) that adds some standard Knockout bindings to child nodes

问题描述

我想使用Knockout实现一些易于重用的(可能是自定义绑定)，它可以应用标准绑定的混合:foreach绑定到tbody节点以及另一个标准绑定(visible和css)到其tr子节点.

I want to implement using Knockout something easily reusable (probably, custom binding) that could apply mix of standard bindings: the foreach binding to a tbody node and another standard bindings (visible and css) to its tr child nodes.

AFAIK，最好的方法是编写自定义绑定.
我想这样使用它:

AFAIK, the best way it can be achieved is to write a custom binding.
I want to use it like that:

<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按照最初在布局中的方式进行处理:

I want the custom binding to 'transform' this into the following and let KO process this as it was initially in the layout:

<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属性中.

Here rowClass() is a function contained in the component and just returns a string that should be appended to the tr's class attribute based on the current $data.

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

I know how to apply the foreach binding to the node that my binding is applied to:

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

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

这部分工作正常.

但是我找不到任何地方如何向子tr节点添加绑定，因此，当foreach绑定将处理子节点时，该绑定(以及该子节点中已经包含的所有绑定)版式)应用于并按照与最初在版式中相同的方式进行处理.

But I can't find anywhere how to add bindings to the child tr nodes, so that when the foreach binding would process child nodes, that bindings (and all bindings that already contained in the child layout) were applied to and processed in the same manner as they were initially in the layout.

我可以尝试使用JS DOM API在init函数中以字符串形式将所需的绑定手动添加到子tr节点，但是我觉得使用某些KO API应该是更干净的解决方案.

I could try to manually add the required bindings to the child tr nodes as a string in the init function using JS DOM API, but I have feeling that it should be cleaner solution using some KO API.

此外，当tr节点上最初包含另一个绑定(包括visible和css绑定)时，我需要自定义绑定来正确处理情况.

Also, I need the custom binding to properly handle cases when there initially are another bindings on the tr nodes including both visible and css bindings.

我的项目使用Knockout 2.2.1，如果解决方案不依赖Knockout 3功能，那将是很好的选择.

My project uses Knockout 2.2.1 and it would be nice if the solution doesn't rely on the Knockout 3 features, if possible.

有人可以建议如何实现这一目标吗?

Could someone suggest how to achieve this?

推荐答案

我认为您应该能够使用

I think you should be able to modify the data-bind attributes of the inner elements of the foreach using jQuery's data or similar. The outer would be processed by Knockout before its inner parts would. I haven't tried such things myself.

实际上，由于您只是在进行样板重写，因此可以在完全应用Knockout绑定之前使用jQuery查找并重写标签.这样可以节省您的自定义绑定处理程序.

In fact, since you're just doing boilerplate-rewrite, you could use jQuery to find and rewrite the tags before you apply Knockout bindings at all. That would save you the custom binding handler.

这篇关于自定义绑定(?)，它向子节点添加了一些标准的Knockout绑定的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！