Javascript 可以在敲除中创建自定义if绑定

我想创建一个“fadeInIf”自定义绑定。我的想法相当于《时尚》中的“流行”：

我对自定义绑定非常陌生，但我认为它可能是这样的：

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”工作了，但无法解决这个问题，我缺少了什么？

我想你在99%的时候做对了，但是第一次之后就不会进行淡入。。。我认为这与“if”绑定处理程序的工作方式有关。我所做的就是改变这一点：

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

为此：

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

---

如果您想查看的话，我已经保存了一部分工作状态。

谢谢您的建议。 我终于让它工作了，我失去了选择。结果如下：

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);
            });
        }
    }
};

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);
            });
        }
    }
};