如何创建“整页对话框”；与DurandalJS [英] How to create "full page dialog" with DurandalJS

问题描述

我试图消除使用DurandalJS版本2构建的Web客户端应用程序（SPA）的 css模态窗口（模态窗口不是移动设备的最好朋友）。

I'm trying to eliminate "css modal windows" (modal windows are not mobile device best friends) of a web client side application (SPA), built with DurandalJS version 2.

我想将模式窗口转换为整页对话框。它仍将是一个对话框窗口，但我不想将div叠加在当前视图上，而是要隐藏当前视图（同时保持其状态）并显示包含对话框的div（如果可能，使用入口过渡或

I would like to convert the modal windows to full page dialogs. It would still be a dialog window but instead of superimpose the div over the current view, I would like to hide the current view (while keeping its state) and show the div containing the dialog (using the "entrance" transition if possible or a similar technique - to keep a consistent flow).

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

I think I am close to a solution. The two options I'm trying at the moment are using the dialog plugin as is (by adding a new dialog context) or creating a new plugin based on the dialog plugin. Either way, I am stock at the point where I need to hide the current view.

任何想法如何使用此视图或如何从当前视图确定当前活动视图compositionComplete是否完全钩在对话框上下文中？

Any ideas how to go with this or how to determine the current active view from the compositionComplete hook inside a dialog context?

DurandalJS Google网上论坛

编辑1 （@ CodingGorilla后面为注释）

Edit 1 (following @CodingGorilla comments)

按原样使用入口过渡在这里并不是重要的部分。我可以复制过渡代码。但是最重​​要的是，我不应该导航到新视图。该概念与DurandalJS中的对话框完全相同。唯一的区别是演示。对话框没有应该具有URL，它与当前状态/窗口相关。

Using the entrance transition as is, is not the important part here. I could live with copying the code of the transition. But what is paramount, is that I should not navigate to a new view. The concept is exactly the same as a dialog in DurandalJS. The only difference is the presentation. A dialog should not have a URL, it is contextual to the current state/window.

推荐答案

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

I think I got it. It is not as pretty as I would like it to be but I am very happy to be able to reuse the dialog plugin and the transition mechanism as is.

这是我使用的对话框上下文：

Here is the dialog context that I use:

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

这篇关于如何创建“整页对话框”；与DurandalJS的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！