自定義綁定（？），它將一些標准的Knockout綁定添加到子節點

Question

我想使用Knockout實現一些易於重用的（可能是自定義綁定），它可以應用標准綁定的混合： foreach綁定到tbody節點，另一個標准綁定（ visible和css ）到其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綁定將處理子節點時，該綁定（以及已經包含在子布局中的所有綁定）都將以相同的方式應用和處理就像他們最初在布局中一樣。

我可以嘗試使用JS DOM API在init函數中將所需的綁定作為字符串手動添加到子tr節點，但是我覺得使用某些KO API應該是更干凈的解決方案。

另外，當tr節點上最初包含visible和css綁定的另一個綁定時，我需要自定義綁定來正確處理情況。

我的項目使用Knockout 2.2.1，如果解決方案不依賴於Knockout 3功能，那將是很好的選擇。

有人可以建議如何實現這一目標嗎？

Answer 1

我認為您應該能夠使用jQuery的data或類似data-bind來修改foreach內部元素的data-bind屬性。 外部將在內部部分之前由淘汰賽處理。 我自己還沒有嘗試過這些東西。

實際上，由於您只是在進行樣板重寫，因此可以在完全應用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 };