Question

我想创建一个“fadeInIf”自定义绑定。我的想法与http://knockoutjs.com/examples/animatedTransitions.html：

中的“fadeVisible”相同

// Here's a custom Knockout binding that makes elements shown/hidden via jQuery's fadeIn()/fadeOut() methods
// Could be stored in a separate utility library
ko.bindingHandlers.fadeVisible = {
    init: function(element, valueAccessor) {
        // Initially set the element to be instantly visible/hidden depending on the value
        var value = valueAccessor();
        $(element).toggle(ko.utils.unwrapObservable(value)); // Use "unwrapObservable" so we can handle values that may or may not be observable
    },
    update: function(element, valueAccessor) {
        // Whenever the value subsequently changes, slowly fade the element in or out
        var value = valueAccessor();
        ko.utils.unwrapObservable(value) ? $(element).fadeIn() : $(element).fadeOut();
    }
};

我对自定义绑定很新，但认为它可能是这样的：

ko.bindingHandlers.fadeInIf = {
    init: function (element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) {
        var value = valueAccessor();
        $(element).toggle(ko.utils.unwrapObservable(value));

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

        ko.bindingHandlers.if.update(element, valueAccessor, allBindingsAccessor, viewModel, bindingContext);
    }
};

我有“fadeVisible”工作，但不能解决这个问题，我错过了什么？

Answer 1

感谢您的建议。我终于搞定了，我错过了controlsDescendantBindings选项。结果如下：

ko.bindingHandlers.fadeIf = {
    init: function (element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) {

        var value = valueAccessor();
        $(element).toggle(ko.utils.unwrapObservable(value));

        ko.bindingHandlers['if'].init(element, valueAccessor, allBindingsAccessor, viewModel, bindingContext);
        return { controlsDescendantBindings: value };
    },
    update: function (element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) {
        var value = valueAccessor();
        if (ko.utils.unwrapObservable(value)) {
            ko.bindingHandlers['if'].update(element, valueAccessor, allBindingsAccessor, viewModel, bindingContext);
            $(element).fadeIn();
        }
        else {
            $(element).fadeOut(200, function () {
                ko.bindingHandlers['if'].update(element, valueAccessor, allBindingsAccessor, viewModel, bindingContext);
            });
        }
    }
};

Answer 2

我认为你在99％时得到了它，但是在第一次之后就不能完成淡入淡出......我认为它与“if”绑定处理程序的工作方式有关。我所做的就是改变这个：

    if (ko.utils.unwrapObservable(value))
        $(element).fadeIn();

进入这个：

    if (ko.utils.unwrapObservable(value)) {
        $(element).toggle(false);
        $(element).fadeIn();
    }

如果你想检查一下，我已经保存了fiddle。

可以在Knockout中创建自定义if绑定

2 个答案: