Durandal 模态和导航（即后退按钮）答案

【问题标题】：Durandal Modals and navigation (i.e. back button)Durandal 模态和导航（即后退按钮）
【发布时间】：2014-01-27 10:31:57
【问题描述】：

这个问题在 durandal 示例应用程序中很容易看到：

1) 导航到“模态对话框”演示 2) 点击按钮显示模态 3) 点击浏览器返回按钮

执行此操作时，页面导航到上一个屏幕，同时保持对话框打开，这几乎不是您想要的。

这里是否有关闭对话框或在打开对话框时阻止导航的最佳做法？

【问题讨论】：

标签： durandal

【解决方案1】：

您可以绑定到 canDeactivate 回调。检查模态是否打开并阻止它，或者如果他们想离开，关闭它

【讨论】：

这是一个很好的建议，尽管有 40 多个视图模型，每个视图模型都可以有几个潜在的对话，以这种方式解决问题将是大量的重复工作。
一次只能打开一个对话框是可行的。在你的 shell 或 isDialogOpen 的其他模块上有一个可观察的标志，并在它们打开时将其作为计数器递增，并在它们关闭时递减。
实际上我们有几个dialog-within-dialog的实例。但是，我确实尝试了一种类似的方法，使用数组在它们打开时推送对话框并在它们关闭时删除。虽然我发现我发布的答案提供了相同的功能，但它工作得相当好。
呃，只需要一个“你确定要离开吗？”在向导中满足此要求:) `

【解决方案2】：

虽然我不希望这个答案立即适用于那里的许多人，但我想把它扔在那里以防它对某人有所帮助。

我们使用打字稿来创建我们的视图模型，并且我们有一个基础视图模型来封装通用功能（以及公开数据服务、发布/订阅等）。在这个视图模型中，这种方法似乎效果很好：

public ShowDialog(viewModel: any) {
    // create a subscription to the router so that we can forcibly close the dialog in the event of a routing call
    var subscription = router.on('router:route:activating');
    subscription.then(() => {
        // we will hit this block if the router is activating while this dialog is open
        var moduleId = viewModel.__moduleId__ || '[No Id]';
        system.log('Navigation detected while dialog is open - the dialog will now be forcibly closed. (' + moduleId + ')', viewModel);
        dialog.close(viewModel);
    });

    var promise = App.showDialog(viewModel);
    promise.then(() => {
        subscription.off(); // kill the router subscription since the dialog is closed at this point
    });

    return promise;
}

消费者可以使用此功能直接替代 durandals 的对话框来选择启用自动关闭功能。

【讨论】：