杜兰达尔过渡-期望"activeView“为空，但它似乎保持了以前的状态？

Question

我正在学习/工作与击倒/持续，并试图建立我的第一个过渡。

我有三个按钮--让我们称它们为"tab1“、"tab2”和"tab3“。

每个按钮都有一个数据绑定的单击事件，指向我的视图模型中的一个方法- "selectTab1“、"selectTab2”和"selectTab3“。

触发时，单击事件将在我的视图模型中设置一个可观察的属性，名为"selectedTabModelProperty“，这恰好是组合所绑定的内容。

所以应该发生的是，我点击一个按钮，构图意识到它的模型已经改变了，转换开始了。神奇的是，它就像一个制表符控件。

现在我尝试添加一个“切换”功能。当我单击当前活动的“选项卡”的按钮时，我想隐藏它。本质上，我将复合模型属性设置为"null“，它隐藏了composition。也很酷..。

这种转变是非常直接的。参见下面的代码-它只是动画的高度之间的面板0和他们的高度。

现在轮到我了。在关于转换的长期文档中，我发现"context.activeView“是”旧“视图/选项卡，而(context.child)是”新“视图/选项卡。如果我运行我的应用程序并选择第一个选项卡，取消选择第一个选项卡并尝试选择第二个选项卡，那么在第二个选项卡动画化之前会有一个延迟。

我通过插入大的动画持续时间来注意到这一点。似乎当我取消选中选项卡(并隐藏包含tab1的组合div )时，它并没有像我所期望的那样将"context.activeView“属性重置为空。因此，实际发生的情况是，在打开新选项卡之前，转换尝试关闭打开的面板(该面板实际上不是打开的，因此它似乎就坐在那里)。

因此，我的问题是:我是否弄错了activeView属性的工作方式？是否有不同的方法来处理组合的div，使其被正确隐藏？这真的是硬脑膜的问题吗？

My：

<button data-bind="click: selectTab1">tab1</button>
<button data-bind="click: selectTab2">tab2</button>
<button data-bind="click: selectTab3">tab3</button>

<!-- ko compose: { model: selectedTabModelProperty(), transition: 'slideUpDown' } -->
<!-- /ko -->

我的过渡：

var slideUpDown = function (context) {
    return system.defer(function (dfd) {
        function endTransition() {
            dfd.resolve();
        }

        var oldPanel = $(context.activeView);
        var newPanel = $(context.child);

        if (newPanel.length == 0)
        {
            oldPanel.animate({ height: '0px' }, 1000, 'swing', function () {
                oldPanel.css({ height: '', display: 'none' });
                startTransition();
            });
        }
        else
        {
            function startTransition() {
                context.triggerAttach();

                if(newPanel != null && newPanel.length != 0) {
                    var newPanelHeight = newPanel.height();
                    newPanel.css({ height : "0px", display : 'block' });
                    newPanel.animate({ height : newPanelHeight }, 1000, 'swing', function() {
                        newPanel.css({ height : '', display : '' });
                        endTransition();
                    });
                }
            }

            if (oldPanel.length != 0) {
                oldPanel.animate({ height: '0px' }, 1000, 'swing', function () {
                    oldPanel.css({ height: '', display: 'none' });
                    startTransition();
                });
            }
            else
            {
                startTransition();
            }
        }
    }).promise();
};

My ViewModel:

 this.selectedTabModelProperty = ko.observable();

    this.selectTab = function (whichTab) {
        switch (whichTab) {
            case "tab1":
                {
                    this.selectedTabModelProperty(myVM1);
                    break;
                }
            case "tab2":
                {
                    this.selectedTabModelProperty(myVM2);
                    break;
                }
            case "tab3":
                {
                    this.selectedTabModelProperty(myVM3);
                    break;
                }
            default:
                {
                    this.selectedTabModelProperty(null);
                    break;
                }
        }
    };

    this.selectTab1 = function () {
        if(this.selectedTabModelProperty() == myVM1) {
            this.selectedTabModelProperty(null);
            return;
        }
        this.selectTab("tab1");
    };
    this.selectTab2 = function () {
        if(this.selectedTabModelProperty() == myVM2) {
            this.selectedTabModelProperty(null);
            return;
        }   
        this.selectTab("tab2");
    };
    this.selectTab3 = function () {
        if(this.selectedTabModelProperty() == myVM3) {
            this.selectedTabModelProperty(null);
            return;
        }
        this.selectTab("tab3");
    };

Answer 1

抱歉-我就把一块钱扔到白痴罐子里.不知何故，我把"startTransition“和"endTransition”转换成了“endTransition”。

if (newPanel.length == 0)
    {
        oldPanel.animate({ height: '0px' }, 1000, 'swing', function () {
            oldPanel.css({ height: '', display: 'none' });
            **endTransition();**
        });
    }