Question

我有一个带有网格的视图，我可以在新窗口中启动不同的视图。父视图需要将数据传递给子视图，并且它不能作为查询字符串传递，因为它非常大。我不能使用原生模态。我只是使用window.open而没有创建自定义模式上下文。我试过的那些

1。尝试使用类似下面的代码

在新窗口中填充隐藏的字段元素

var popup = window.open('/#/viewname');
popup.onload=function(){document.findbyid('hiddenfield')= newvalue };

我正在使用启动页面显示durandal中的加载，路由器仍在导航的新窗口的onload，我得到启动页面文档

2。尝试在子视图中需要父视图，然后使用类似下面的代码获取父视图数据

define(['viewmodels/parent'],function ('parent'){

function activate(){
localvariablevalue= parent.observable;



}

return{
activate:activate
}

});

我将parent.observable视为未定义。很可能它已经脱离了上下文，因为这是一个新窗口。

3.Tried一个singleton global.js文件并在父母和孩子中都要求它但我认为这也失去了上下文，因为即使采用这种方法我也未定义

关于如何实现这一点的任何想法..如果可以使用v 1.2实现？如果可以通过创建自定义模态上下文来实现，那么有人可以给出一些关于如何为新窗口定义addContext函数的指示。

Answer 1

通过使用window.open，创建了与{1}} SPA的独立实例，该实例与第一个SPA无关。如果你真的需要打开一个新的窗口，那么你需要考虑在窗口之间交换信息的其他方式。 localstorage。

但是你可能最好不要重新考虑这些要求，看看你是否用模态来达到目标。

根据评论进行修改：这与Durandal失去上下文无关，而是#/viewname未在同一会话中打开。见例如window.open doesn't open in same session

Edit2 作为替代方案，您可以使用第二个窗口window.open中的参数#/viewname直接从服务器检索数据（如果适用）或通过{{ 3}}例如第一个浏览器中的localstorage或sessionstorage。

编辑3 我做了一个快速测试，看看是否可以单独使用vm.activate来完成。在Firefox / Firebug中测试过。我仍然建议检查webstorage的链接，以确保这是跨浏览器的。

转到webstorage，打开控制台并创建全局变量：

window.open

创建一个新窗口

window.myVar = {complex: true};

返回第一个控制台并在myWindow上创建属性myvar

var myWindow = window.open('http://dfiddle.github.io/dFiddle-1.2/#/view-composition');

切换到第二个窗口的控制台并检查

myWindow.myVar = myVar;

我建议的替代方法使用您传递到第二个窗口的唯一哈希值，然后检索复杂数据（可以作为查询字符串添加）作为myVar // output {complex: true}回调的一部分。数据可以存储在服务器上或通过webstorage存储。

Answer 2

Rainer感谢您试图提供帮助。以下代码将生成最大化的模态。在这个阶段，我将退出此解决方案并将我的数据作为激活传递给showModal。它是默认模态上下文的精确副本，具有较小的css变体。但如果它可以帮助某人，则将其发布。

<强> 1。 CSS

.modalHostMax {
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    position: fixed;
    opacity: 0;

    -webkit-backface-visibility: hidden;

    -webkit-transition: opacity 0.1s linear; 
    -moz-transition: opacity 0.1s linear; 
    -o-transition: opacity 0.1s linear;
    transition: opacity 0.1s linear;
}
.modalMax {

    width: 100%;
    height: 100%;


}

2.新模态背景

   var addContext = function (contextName) {
            modalDialog.addContext(contextName, {
                blockoutOpacity: .2,
                removeDelay: 200,
                addHost: function (modal) {
                    var body = $('body');
                    var blockout = $('<div class="modalBlockout"></div>')
                        .css({ 'z-index': modalDialog.getNextZIndex(), 'opacity': this.blockoutOpacity })
                        .appendTo(body);

                    var host = $('<div class="modalHostMax"></div>')
                        .css({ 'z-index': modalDialog.getNextZIndex() })
                        .appendTo(body);

                    modal.host = host.get(0);
                    modal.blockout = blockout.get(0);

                    if (!modalDialog.isModalOpen()) {
                        modal.oldBodyMarginRight = $("body").css("margin-right");

                        var html = $("html");
                        var oldBodyOuterWidth = body.outerWidth(true);
                        var oldScrollTop = html.scrollTop();
                        $("html").css("overflow-y", "hidden");
                        var newBodyOuterWidth = $("body").outerWidth(true);
                        body.css("margin-right", (newBodyOuterWidth - oldBodyOuterWidth + parseInt(modal.oldBodyMarginRight)) + "px");
                        html.scrollTop(oldScrollTop); // necessary for Firefox
                        $("#simplemodal-overlay").css("width", newBodyOuterWidth + "px");


                    }


                },
                removeHost: function (modal) {
                    $(modal.host).css('opacity', 0);
                    $(modal.blockout).css('opacity', 0);

                    setTimeout(function () {
                        $(modal.host).remove();
                        $(modal.blockout).remove();
                    }, this.removeDelay);

                    if (!modalDialog.isModalOpen()) {
                        var html = $("html");
                        var oldScrollTop = html.scrollTop(); // necessary for Firefox.
                        html.css("overflow-y", "").scrollTop(oldScrollTop);
                        $("body").css("margin-right", modal.oldBodyMarginRight);
                    }
                },
                afterCompose: function (parent, newChild, settings) {

                    var $child = $(newChild);
                    var width = $child.width();
                    var height = $child.height();



                    $child.attr('class', 'modalMax');
                    $(settings.model.modal.host).css('opacity', 1);

                    if ($(newChild).hasClass('autoclose')) {
                        $(settings.model.modal.blockout).click(function () {
                            settings.model.modal.close();
                        });
                    }

                    $('.autofocus', newChild).each(function () {
                        $(this).focus();
                    });
                }
            });
        };

第3。在目标视图中，确保容器min-height设置为$（document）.height（）

<强> 4。通过调用addContext（'yourcontextname'）来设置自定义上下文。然后创建你的模态 - app.showModal（'viewname'，{data}，'yourcontextname'）

在Durandal中的视图之间传递数据

2 个答案: