KnockoutJS：淡出其他东西后淡出

Question

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

<div>
    <label>
        <input type="radio" name="Who" value="Myself" 
            checked="@isMyselfChecked" data-bind="checked: who" />
        Mine
    </label>
    <label>
        <input type="radio" name="Who" value="MemberId" 
            checked="@isMemberIdChecked" data-bind="checked: who" />
        I know the member's ID
    </label>
    <label>
        <input type="radio" name="Who" value="MemberUrl" 
            checked="@isMemberUrlChecked" data-bind="checked: who" />
        I know the member's URL
    </label>
</div>

当用户选择第一个单选按钮（Mine / Myself）时，不需要额外的输入。但是，在选择第二个或第三个时，需要额外的输入 ：

<div>
    <input type="text" name="MemberId" placeholder="Enter Member ID" 
        data-bind="toggleWho: who()" style="display: none" />
    <input type="text" name="MemberUrl" placeholder="Enter Member URL" 
        data-bind="toggleWho: who()" style="display: none; width: 450px;" />
</div>

在依赖文本框中只有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);

Answer 1

您必须稍微调整一下以适合您的示例，但我需要简化它以在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;
        }        
    }
};

Answer 2

谢谢Tyrsius的回答。我不得不从小提琴中调整它。我能够使用稍微修改过的绑定来使其与问题中的相同无线电一起工作（没有foreach）：

@* radios same as in question *@
<div>
    <input type="text" name="MemberId" placeholder="Enter Member ID" 
        data-bind="whoFader: who() === 'MemberId'" style="display: none" />
    <input type="text" name="MemberUrl" placeholder="Enter Member URL" 
        data-bind="whoFader: who() === 'MemberUrl'" 
        style="display: none; width: 450px;" />
</div>

ko.bindingHandlers.whoFader = {
    previousElement: null,
    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 (this.previousElement == null) {
                $(element).fadeIn('fast');
            } else {
                $(this.previousElement).hide();
                $(element).fadeIn('fast');
            }
            this.previousElement = element;
        }
        else {
            $(element).fadeOut('fast');
        }
    }
};