淘汰赛自定义绑定处理程序不更新子元素答案

【问题标题】：Knockout custom binding handler does not update children elements淘汰赛自定义绑定处理程序不更新子元素
【发布时间】：2014-11-21 18:22:50
【问题描述】：

我在使用创建上下文的自定义敲除绑定处理程序时遇到问题。演示在这里：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”是有效的。

【问题讨论】：

抱歉，什么小提琴有问题？我们在看什么？我们怎么知道它不起作用？你知道，期待什么？实际发生了什么？它对我来说似乎很实用。
更改选择时，“错误：”之后的所有文本都不会更新。这就是错误。在我看来，它应该像“Ok:”之后的所有文本一样改变，它使用了不同的技术。
一个或多或少简单的解决方案是将您的 $container 转换为计算：jsfiddle.net/wn5zp9qu。但是在这种情况下，您必须在每个要使用它的地方写 $container()：data-bind="foreach: $container().data"
这很好@nemesv。我正在研究类似的东西，但无法自己构建它。刚才需要看看它在我的真实代码中是否有效，这比这个测试要复杂得多。
你也可以使用 ko.contextFor(element)

标签： knockout.js bindinghandlers

【解决方案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

【讨论】：