Question

我有一个使用动态加载需要的挖空组件的SPA。

这是目前的样子

        <!-- 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/

Knockout 3.2 - AMD加载组件之间的'if'基础转换

1 个答案: