0

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

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

在我的视图模型中，每个按钮都有一个数据绑定点击事件——“selectTab1”、“selectTab2”和“selectTab3”。

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

所以应该发生的是，我单击一个按钮，合成意识到它的模型已经改变，并且过渡运行。神奇的是，它有点像选项卡控件。

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

过渡非常简单。请参阅下面的代码 - 它只是在 0 和它们的高度之间为面板的高度设置动画。

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

我通过插入较大的动画持续时间注意到了这一点。似乎当我取消选中选项卡（并隐藏包含 tab1 的组合 div）时，它并没有像我预期的那样将“context.activeView”属性重置为 null。所以实际发生的情况是，在打开新选项卡之前，转换会尝试关闭打开的面板（实际上并没有打开，所以它似乎只是坐在那里）。

所以我的问题是：我对 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");
    };
4

1 回答 1

0

抱歉 - 我会在白痴罐子里放一美元......不知何故我用“endTransition”换了一个“startTransition”。

if (newPanel.length == 0)
    {
        oldPanel.animate({ height: '0px' }, 1000, 'swing', function () {
            oldPanel.css({ height: '', display: 'none' });
            **endTransition();**
        });
    }
于 2013-09-23T20:14:24.817 回答