Knockout 3.2 - переход "если" между загруженными компонентами AMD

Question

У меня есть SPA, который использует нокаутированные компоненты, динамически загружаемые с помощью require.

Вот как это выглядит

        <!-- ko if: state() === 'one' -->
        <component-one></component-one>
        <!-- /ko -->

        <!-- ko if: state() === 'two' -->
        <component-two></component-two>
        <!-- /ko -->

        <!-- ko if: state() === 'three' -->
        <component-three params="myParam: MyParam()"></component-three>
        <!-- /ko -->

        <!-- ko if: state() === 'four' -->
        <component-four></component-four>
        <!-- /ko -->

Я ищу то, что дает тот же результат, что и if привязка для виртуальных элементов, но также позволяет мне размещать переходы (постепенное увеличение / уменьшение) при изменении состояния.

Я нашел что-то вроде этого http://jsfiddle.net/rniemeyer/kNtdu/ которое работает для нокаута 2.1, но не 3.2.

Обратите внимание, я не ищу только fadeVisible, но больше по линии fadeIf,

Спасибо за любую помощь.

Answer 1

Вот привязка, которую я только что собрал.

ko.bindingHandlers.ifFading = {
    init: function(element, valueAccessor, ignored1, ignored2, bindingContext) {
        var template = $(ko.virtualElements.childNodes(element)).filter("*").clone(),
            lastValue = false;
        ko.virtualElements.emptyNode(element);

        ko.computed(function () {
            var dataValue = !!ko.unwrap(valueAccessor());
            if (dataValue !== lastValue) {
                lastValue = dataValue;
                if (dataValue) {
                    var templateClone = template.clone();
                    ko.virtualElements.setDomNodeChildren(element, templateClone);
                    templateClone.hide();
                    ko.applyBindingsToDescendants(bindingContext, element);
                    templateClone.fadeIn();
                } else {
                    $(ko.virtualElements.childNodes(element)).fadeOut(function () {
                        ko.virtualElements.emptyNode(element);
                    });
                }
            }
        }, null, { disposeWhenNodeIsRemoved: element });

        return { controlsDescendantBindings: true };
    }
};
ko.virtualElements.allowedBindings.ifFading = true;

В действии: http://jsfiddle.net/mbest/6tpn5uhy/

Вот более простая версия, которая не использует fadeOut: http://jsfiddle.net/mbest/6tpn5uhy/1/