4

概述

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

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

细节

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

下面的代码示例。可以在此处查看完整的 JSFiddle 示例。

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 示例，我没有扩展行为，而是通过添加以下行“http://jsfiddle.net/jamshall/kYwEE/1/” （从默认 html 绑定的淘汰源复制）重新创建它以上引用的html.update调用。这似乎工作正常。

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

谢谢你的帮助

4

1 回答 1

1

您可以update将自定义绑定的功能想象为计算的 observable（当元素上的绑定执行时，Knockout 确实使用计算的 observables 来跟踪依赖关系）。因此，在您的自定义绑定中，您不会获取对绑定的 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/

于 2012-10-31T16:04:38.100 回答