javascript - Knockout 3.2 - AMD 加载组件之间基于“if”的转换

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。

请注意，我不只是在寻找 a fadeVisible，而是更多地寻找 a 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/

这是一个不使用的更简单的版本：http fadeOut: //jsfiddle.net/mbest/6tpn5uhy/1/