Question

我正在学习/使用淘汰赛/ durandal并尝试建立我的第一次过渡。

我有一排3个按钮 - 让我们称它们为“tab1”，“tab2”和“tab3”。

每个按钮都有一个数据绑定点击事件到我的viewmodel中的方法 - “selectTab1”，“selectTab2”和“selectTab3”。

当被触发时，click事件将在我的viewmodel中设置一个名为“selectedTabModelProperty”的可观察属性，该属性恰好是组合所绑定的属性。

所以应该发生的是，我点击一个按钮，组合实现它的模型已被更改，并且转换运行。奇迹般地，它有点像标签控件。

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

过渡非常简单。请参阅下面的代码 - 它只是激活面板在0和高度之间的高度。

现在我的问题。在关于转换的durandal文档中，我发现“context.activeView”是“旧”视图/选项卡，而（context.child）是“新”视图/选项卡。如果我运行我的应用程序并选择第一个选项卡，取消选择第一个选项卡并尝试选择第二个选项卡，则在第二个选项卡设置为动画之前有一段延迟。

我通过插入大型动画持续时间来注意到这一点。似乎当我取消选中选项卡（并隐藏包含tab1的组合div）时，它并没有像我期望的那样将“context.activeView”属性重置为null。那么实际发生的情况是，在打开新标签页之前，过渡尝试关闭打开的面板（实际上并不打开，因此看起来只是坐在那里）。

所以我的问题是：我是否误解了activeView属性的工作原理？有没有不同的处理组合div的方法，所以它被正确隐藏？这实际上是durandal的一个问题吗？

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

我的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

对不起 - 我只是在白痴罐子里掏了一美元......不知怎的，我用“endTransition”换了一个“startTransition”。

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

Durandal Transition - 期望“activeView”为null但它似乎维持它以前的状态？

1 个答案: