Question

我遇到了一个创建上下文的自定义knockout绑定处理程序的问题。演示在这里：http://jsfiddle.net/gf3tfarz/14/

当'container'应用于可观察数组时，它不会更新子元素。

<div data-bind="container: { data: selectedCountry().ids }">
    <p>Error: <span data-bind="text: $container.data().length"></span></p>
    <div data-bind="foreach: $container.data">
        <p>Error: <span data-bind="text: $data"></span></p>
    </div>
</div>

这是自定义绑定处理程序：

ko.bindingHandlers.container = {
    init: function(element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) {
        var innerBindingContext = bindingContext.extend({
            $container: ko.utils.unwrapObservable(valueAccessor())
        });

        ko.applyBindingsToDescendants(innerBindingContext, element);

        return { controlsDescendantBindings: true };
    }
};

我想在演示工作中使用“容器”的两个例子。

请注意，使用“with”会有效。

Answer 1

你不应该直接扩展bindingContext，你应该创建一个子绑定上下文。然后它会按照你期望的方式工作。

ko.bindingHandlers.container = {
    init: function(element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) {       
        // Make a modified binding context, with a extra properties, and apply it to descendant elements
        var innerBindingContext = bindingContext.createChildContext(
            bindingContext.$rawData, 
            null, // Optionally, pass a string here as an alias for the data item in descendant contexts
            function(context) {
                ko.utils.extend(context, {
                    $container: ko.utils.unwrapObservable(valueAccessor())
                });
            });

        ko.applyBindingsToDescendants(innerBindingContext, element);

        return { controlsDescendantBindings: true };
    }
};

有关详细信息，请参阅本页底部... http://knockoutjs.com/documentation/custom-bindings-controlling-descendant-bindings.html

Knockout自定义绑定处理程序不会更新子元素

1 个答案: