durandal - 如何使用 DurandalJS 创建 "full page dialog"

Question

我正在尝试消除使用 DurandalJS 版本 2 构建的 Web 客户端应用程序 (SPA) 的“css 模态窗口”(模态窗口不是移动设备最好的 friend )。

我想将模态窗口转换为整页对话框。它仍然是一个对话框窗口，但不是将 div 叠加在当前 View 上，我想隐藏当前 View (同时保持其状态)并显示包含对话框的 div(如果可能，使用“入口”转换或类似的技术 - 保持一致的流程)。

我想我已经接近解决方案了。我目前正在尝试的两个选项是按原样使用对话框插件(通过添加新的对话框上下文)或基于对话框插件创建新插件。无论哪种方式，我都知道需要隐藏当前 View 。

任何想法如何处理这个或如何从对话框上下文中的 compositionComplete Hook 确定当前事件 View ？

关于DurandalJS Google Groups的相关问题

编辑 1(在@CodingGorilla 评论之后)

按原样使用入口过渡不是这里的重要部分。我可以忍受复制转换代码。但最重要的是，我不应该导航到新 View 。这个概念与 DurandalJS 中的对话框完全相同。唯一的区别是演示文稿。对话框不应该有一个 URL，它是当前状态/窗口的上下文。

Answer 1

我想我明白了。它不像我希望的那样漂亮，但我很高兴能够按原样重用对话框插件和转换机制。

这是我使用的对话上下文:

define(['jquery', 'knockout', 'transitions/entrance', 'plugins/dialog'], function ($, ko, entrance, dialog) {
    return {
        addHost: function (theDialog) {
            //Cheat - only applies to my project (where I want to put the dialog - side-by-side with the current active view)
            var container = $('div.document-edit');

            var host = $('<div></div>').appendTo(body);
            theDialog.host = host.get(0);

            //Cheat - the view I want to hide (while the dialog is displayed)
            theDialog.activeView = container.find("div[data-active-view='true']:first").get(0); 
        },
        removeHost: function (theDialog) {
            var context = {
                activeView: theDialog.host,
                child: theDialog.activeView,
                triggerAttach: function () { } //Cheat - no need for triggerAttach
            };

            entrance(context).then(function () {
                ko.removeNode(theDialog.host);
            });
        },
        compositionComplete: function (child, parent, context) {
            var theDialog = dialog.getDialog(context.model);
            context.activeView = theDialog.activeView;

            //Cheat - no need for triggerAttach
            context.triggerAttach = function () { }; 

            entrance(context).then(function () { });
        }
    };
});