扩展“IF”绑定的淘汰赛自定义绑定答案

【问题标题】：Knockout custom binding extending the "IF" binding扩展“IF”绑定的淘汰赛自定义绑定
【发布时间】：2012-06-03 05:25:26
【问题描述】：

我有以下基于 Ryan Niemeyer 博客的自定义绑定，但我认为它不起作用。 div 并没有让他褪色，而是根本不显示。我尝试添加“init”函数，但这并没有解决问题，所以我回到了简单的更新函数，就像 Ryan 在示例中提供的那样。

ko.bindingHandlers.fadeInIf = {
    update: function(element, valueAccessor) {
        ko.bindingHandlers.if.update(element, valueAccessor);
        $(element).fadeIn(); 
    } 
};

在 html 中我执行以下操作：

<div data-bind="fadeInIf: show">...</div>

博文：http://www.knockmeout.net/2011/07/another-look-at-custom-bindings-for.html

【问题讨论】：

标签： javascript html knockout.js custom-binding

【解决方案1】：

您在fadeInIf 中代理的if 绑定实际上是用于创建dom 元素，详情请参阅this documentation。

实现一个fadeInIf你简单的需要。

ko.bindingHandlers.fadeInIf = {
    update: function(element, valueAccessor) {
        var value = ko.utils.unwrapObservable(valueAccessor());
        if (value) {
            $(element).fadeIn();
        }
    }
};

http://jsfiddle.net/madcapnmckay/3rRUQ/2/

如果您想要的更多的是一个 fadeVisible 绑定，我在小提琴中也包含了一个示例。

希望这会有所帮助。

【讨论】：