响应Durandal对话框

Question

我在我的新应用程序中使用了Durandal,我在Durandal的对话窗口中遇到了问题(我用它来从用户那里获取一些数据).

当我手动设置窗口宽度时,(默认情况下Durandal从JavaScript设置窗口位置)如果我想要窗口宽度为600px,我需要通过CSS来实现.dialog { width: 600px! important}.这就是所有问题开始的地方.

在窗口调整大小时,对话框不再响应,当我有大表格并且窗口高度很小时,例如在笔记本电脑上我看不到我的表格的一半,我没有得到任何滚动.

在移动设备上,它总是一团糟.有谁知道如何使这个东西工作？

Answer 1

我相信Durandal模式正在接受Durandal 2.1中的爱情,虽然我不知道它是否会响应.

与此同时,Durandal提供了实现自己的模态功能所需的所有钩子 - 包括定义不同类型的模态对话框的能力.你可以在这里读更多关于它的内容:

http://durandaljs.com/documentation/Showing-Message-Boxes-And-Modals.html

我通过google groups上的一些代码对此进行了简要的实验,并且能够使bootstrap 3模态工作.

欢迎您试一试,看看它是否适合您.请注意,您必须使用bootstrap 3才能工作(durandal 2.0 starterkit等附带bootstrap 2)

在dialog.js中,就在之前 return dialog;

dialog.addContext('bootstrap', {
    addHost: function (theDialog) {
        var body = $('body');
        $('<div class="modal fade" id="myModal"></div>').appendTo(body);
        theDialog.host = $('#myModal').get(0);
    },
    removeHost: function (theDialog) {
        setTimeout(function () {
            $('#myModal').modal('hide');
            $('body').removeClass('modal-open');
            $('.modal-backdrop').remove();
        }, 200);

    },
    compositionComplete: function (child, parent, context) {
        var theDialog = dialog.getDialog(context.model);
        $('#myModal').modal('show');
    },
    attached: null
});

然后激活:

dialog.show(viweModel, null, 'bootstrap')

或者我相信这也可以,但我没有测试它:

dialog.showBootstrap(viewModel)

您的视图应遵循标记模式:

<div class="messageBox">
    <div class="modal-header">
        Header Markup
    </div>
    <div class="modal-body">
        Body Markup
    </div>
    <div class="modal-footer">
        Footer Markup
     </div>
</div>

以下是我获得代码的要点:https: //gist.github.com/webm0nk3y/7603042

以及相关的Google群组主题:https://groups.google.com/forum/#!topic / durandaljs / 8g7DDCuvlpU