jquery – KnockoutJS：淡出其他东西后淡入淡出

假设我有一组3个单选按钮：

当用户选择第一个单选按钮(Mine / Myself)时,不需要额外的输入.但是,在选择第二个或第三个时,需要额外的输入：

只需在依赖文本框中使用data-bind =“visible：who()==='[MemberId | MemberUrl]’”即可.但是,如果我想添加淡入/淡出过渡怎么办？

我从淘汰站点尝试了示例自定义fadeVisible bindingHandler,我理解它是如何工作的.然而,这将同时在文本框中淡出和淡出.如果选择了无线电’MemberId’,并且用户选择’MemberUrl’无线电,我希望MemberId文本框在MemberUrl文本框淡入之前淡出.

以下是我现在所拥有的,它有效,但我不认为这是最佳的.在前一个元素消失之前,怎么还能告诉他们不执行淡入淡出？我需要另一个ko.observale,还是可能是ko.computed？

var viewModel = {
    fadeSpeed: 150,who: ko.observable($('input[type=radio][name=Who]:checked').val())
};

ko.bindingHandlers.toggleWho = {
    init: function (element,valueAccessor) {
        var value = valueAccessor();
        var unwrapped = ko.utils.unwrapObservable(value);
        if (unwrapped === element.name)
            $(element).show();
    },update: function (element,valueAccessor) {
        var value = valueAccessor();
        var unwrapped = ko.utils.unwrapObservable(value);

        // when selected value is myself,fade out the visible one,if any
        if (unwrapped === 'Myself') {
            $('input[type=text][name=MemberId]:visible')
                .fadeOut(viewModel.fadeSpeed);
            $('input[type=text][name=MemberUrl]:visible')
                .fadeOut(viewModel.fadeSpeed);
        }

            // when selected value is memberid,may need to fade out url first
        else if (unwrapped === 'MemberId') {
            if ($('input[type=text][name=MemberUrl]:visible').length > 0) {
                $('input[type=text][name=MemberUrl]:visible')
                    .fadeOut(viewModel.fadeSpeed,function () {
                        $('input[type=text][name=MemberId]')
                            .fadeIn(viewModel.fadeSpeed);
                    });
            } else {
                $('input[type=text][name=MemberId]')
                    .fadeIn(viewModel.fadeSpeed);
            }
        }

            // when selected value is memberurl,may need to fade out id first
        else if (unwrapped === 'MemberUrl') {
            if ($('input[type=text][name=MemberId]:visible').length > 0) {
                $('input[type=text][name=MemberId]:visible')
                    .fadeOut(viewModel.fadeSpeed,function () {
                        $('input[type=text][name=MemberUrl]')
                            .fadeIn(viewModel.fadeSpeed);
                });
            } else {
                $('input[type=text][name=MemberUrl]')
                    .fadeIn(viewModel.fadeSpeed);
            }
        }
    }
};

ko.applyBindings(viewModel);

最佳答案

您将不得不适应这一点以适应您的示例,但我需要简化它以在this fiddle中进行测试.

这是绑定：

var previousElement = null;
ko.bindingHandlers.fadeSwitcher = {
    init: function(element,valueAccessor) {
        var value = valueAccessor();
        $(element).toggle(ko.utils.unwrapObservable(value));
    },update: function(element,valueAccessor) {

        var value = ko.utils.unwrapObservable(valueAccessor());
        if (value) {
            if (previousElement == null) { // initial fade
                $(element).fadeIn();
            } else {
                $(previousElement).fadeOut('fast',function() {
                    $(element).fadeIn();
                });
            }
            previousElement = element;
        }        
    }
};