调用默认敲除绑定时自定义敲除绑定失败答案

【问题标题】：Custom Knockout binding failing when invoking default knockout binding调用默认敲除绑定时自定义敲除绑定失败
【发布时间】：2012-10-31 15:26:58
【问题描述】：

概述

创建包含对淘汰赛默认绑定的调用的knockout custom binding 时，我的自定义绑定在第一次调用后停止工作。

要查看问题，请在 JSFiddle example 中更改 ddl 中的选定项目一次。文本按预期更改。再次更改它，没有任何反应。失败。

详情

在使用我自己的自定义绑定“htmlFade”扩展默认淘汰赛绑定“html”时，我看到了一些奇怪的行为。我正在寻找的行为与 html binding 相同，但使用 JQuery 淡入淡出动画来淡入和淡出 DOM 元素。

下面的代码示例。完整的 JSFiddle 示例可以查看 here。

HTML 如下所示：

<select data-bind="options: names, value: selectedName"></select>  
<data-bind="htmlFade : selectedName" class="main"></div>

Json 数据如下所示：

var viewModel = {
    names: ko.observableArray(['Bob', 'Jon']),
    selectedName: ko.observable('Bob')
};

自定义绑定如下所示：

ko.bindingHandlers.htmlFade = {
    init: function(element, valueAccessor) {
        ko.bindingHandlers.html.init();
        $(element).hide();
    },
    update: function(element, valueAccessor) {
        $(element).fadeOut(700, function() {
           ko.bindingHandlers.html.update(element, valueAccessor);           
           $(element).fadeIn(700);
        });        
    }
};

我故意使用 "ko.bindingHandlers.html.update(element, valueAccessor)" 行来推迟默认的 html 处理程序，因为我的目标是扩展行为，而不是重新创建。

问题我遇到的是上面的代码在第一次更改选择列表时工作。之后它就失败了。

我创建了另一个 JSFiddle example，而不是扩展行为，我通过添加以下行重新创建它 "http://jsfiddle.net/jamshall/kYwEE/1/"（复制自knockout source for the default html binding) 代替上面引用的 html.update 调用。这似乎工作正常。

我的问题那么，为什么我的自定义绑定在第一次调用后停止工作，当我包含对默认绑定的调用时？或者，为了简单起见，为什么JSFiddle1 不起作用但JSFiddle2 起作用？

感谢您的帮助

【问题讨论】：

标签： knockout.js

【解决方案1】：

您可以将自定义绑定的update 函数想象成一个计算的可观察对象（Knockout 确实在执行元素上的绑定时使用计算的可观察对象来跟踪依赖关系）。因此，在您的自定义绑定中，您不会获取对绑定的 observable 的依赖，因为您的代码是异步执行的。

在您的update 中，您可能想要执行以下操作：

update: function(element, valueAccessor) {
    //just grab dependency
    ko.utils.unwrapObservable(valueAccessor());

    $(element).fadeOut(700, function() {
       ko.bindingHandlers.html.update(element, valueAccessor);           
       $(element).fadeIn(700);
    });        
}

所以，我们只需访问 observable 的值来获取依赖项。 ko.utils.unwrapObservable 只是安全地处理检索值，无论它是不可观察的还是可观察的。

更新示例：http://jsfiddle.net/rniemeyer/6UtsP/10/

【讨论】：