Programmatically closing a Durandal modal

问题

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

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

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

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

回答1:

Note for anyone using Durandal 2.0, the above marked answer only works in earlier 1.x versions. Happy coding!

回答2:

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;

});

来源：https://stackoverflow.com/questions/18245984/programmatically-closing-a-durandal-modal

标签

durandal