knockout.js - 淘汰赛自定义绑定处理程序不更新子元素

Question

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

当“容器”应用于可观察数组时，它不会更新子元素。

<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