以编程方式关闭Durandal模式 [英] Programmatically closing a Durandal modal

问题描述

我是Durandal的新手，所以对于我的问题，我可能采取了错误的方法。

I'm new to Durandal, so I might be taking the wrong approach to my problem.

我想显示一个模态弹出框，并显示正在记录消息当用户单击登录按钮时，请输入...。接收到响应后，我想关闭模式弹出窗口。我尝试的方法是使用登录视图模型中的Durandal的app.showModal和无按钮的视图来调用自定义模式弹出窗口。这显示了我正在使用的模式弹出窗口，但是在收到服务器响应后，我还无法弄清楚如何关闭弹出窗口。我见过的所有示例在模式弹出窗口上都有一个按钮，用于关闭弹出窗口。

I want to show a modal popup with a message of 'logging in...please wait' when the user has clicked the login button. I want to close the modal popup once the response is received. My attempted approach is to call a custom modal popup using Durandal's app.showModal and a view with no buttons, from the login view model. This shows the modal popup I'm after, but I haven't been able to figure out how to close the popup once the server response is received. All the examples I've seen have a button on the modal popup view that closes the popup.

这可能吗？如果没有，是否有更好的方法可以向用户显示正在发生的事情，并且还可以阻止用户尝试使用视图上的任何其他按钮？

Is this possible? If not, is there a better approach that will show the user something is happening and also stop the user from trying to use any other button on the view?

这里是视图登录视图的模型代码（删除了多余的代码）：

Here's the view model code for the login view (with extraneous code removed):

define(['services/appsecurity', 'durandal/plugins/router', 'services/utils', 'services/errorhandler', 'durandal/app', 'viewmodels/controls/activityindicator'],
function (appsecurity, router, utils, errorhandler, app, activityIndicator) {

    var username = ko.observable().extend({ required: true }),
        password = ko.observable().extend({ required: true, minLength: 6 }),
        rememberMe = ko.observable(),
        returnUrl = ko.observable(),
        isRedirect = ko.observable(false),

    var viewmodel = {
        username: username,
        password: password,
        rememberMe: rememberMe,
        returnUrl: returnUrl,
        isRedirect: isRedirect,
        appsecurity: appsecurity,

        login: function() {

            var credential = new appsecurity.credential(this.username(), this.password(), this.rememberMe() || false),
                self = this;

            activityIndicator.message = 'Logging in...please wait';
            app.showModal(activityIndicator);

            appsecurity.login(credential, self.returnUrl())
                .fail(self.handlevalidationerrors)
                .always(function() { activityIndicator.close(); });
        }};

    return viewmodel;
});

appsecurity.login 函数是ajax发布电话。自定义模式的视图模型为：

The appsecurity.login function is the ajax post call. The view model for the custom modal is:

define(function () {

var activityIndicator = function (message, title, options) {
    this.message = message;
    this.title = title || activityIndicator.defaultTitle;
    this.options = options || activityIndicator.defaultOptions;

    this.close = function() {
        this.modal.close();
    };
};

return activityIndicator;
});

运行此命令时，我在上遇到错误。always（function（） {activityIndi​​cator.close（）;}）; 关闭的未定义。

When running this, I get an error on .always(function() { activityIndicator.close(); }); of close is undefined.

推荐答案

发现了问题。自定义模式的视图模型是错误的，因此未定义 close（）方法。有效的视图模型是：

Found the problem. The viewmodel for the custom modal was wrong, so the close() method was undefined. The working viewmodel is:

define(function () {

var message = ko.observable();

var activityIndicator = {
    message: message,

    close: function() {
        this.modal.close();
    }
};

return activityIndicator;

} ）;

这篇关于以编程方式关闭Durandal模式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！