Durandal Transition - Ожидается, что «activeView» будет нулевым, но, похоже, оно сохранит свое прежнее состояние?

Я учусь/работаю с нокаутом/дурандалом и пытаюсь построить свой первый переход.

У меня есть строка из трех кнопок - позвоните им "tab1", "tab2" и "tab3".

Каждая кнопка имеет связанное с данными событие click для метода в моей модели просмотра - "selectTab1", "selectTab2" и "selectTab3".

При запуске события click устанавливают свойство visibleable в моей модели просмотра под названием "selectedTabModelProperty", которая, как оказалось, связана с композицией.

Итак, что должно произойти, я нажимаю кнопку, композиция понимает, что модель была изменена, и переход выполняется. И волшебным образом, это похоже на работу с табуляцией.

Теперь я пытаюсь добавить функцию "переключение". Когда я нажимаю кнопку активной активной вкладки, я хочу ее скрыть. По сути, я установил свойство модели композиции в "null", которое скрывает compose div. Также круто...

Переход довольно прямолинейный. См. Код ниже - он просто оживляет высоту панелей между 0 и их высотой.

Теперь для моей проблемы. В durandal документации о переходах я обнаружил, что "context.activeView" является "старым" представлением/вкладкой, а (context.child) является "новым" представлением/вкладкой. Если я запустил приложение и выбрал первую вкладку, отмените выбор первой вкладки и попытайтесь выбрать вторую вкладку, перед тем, как вторая вкладка оживит ее, будет задержка.

Я заметил это, вставив большие длительности анимации. Кажется, что, когда я снимаю флажок с вкладки (и скрываю скомпилированный div, содержащий tab1), он не сбрасывает свойство "context.activeView" равным нулю, как я ожидал. Так что на самом деле происходит переход - это попытка закрыть открывающуюся панель (которая фактически не открыта, так что она просто сидит там), прежде чем открывать новую вкладку.

Поэтому мои вопросы: я ошибаюсь в том, как работает свойство activeView? Есть ли другой способ избавиться от сложенного div, чтобы он был правильно скрыт? Может ли это быть проблемой с дюрандалом?

Мой HTML:

<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();
};

Моя модель просмотра:

 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");
    };