Geek Answers Handbook

Software closure of Durandal modal

I am new to Durandal, so maybe I'm wrong about my problem.

I want to show a modal popup with the message "log in ... wait" when the user clicks on the login button. I want to close the modal popup after receiving a response. My approach is to invoke a custom modal popup using the Durandal app.showModal and view without buttons from the login model. This shows the modal popup that I need, but I was not able to figure out how to close the popup after receiving a server response. All the examples I've seen have a button on a modal popup view that closes the popup.

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

Here is the code for the view model for logging in (with external 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 an ajax post call. Representation model for custom modal:

 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 I start this process, I get an error .always(function() { activityIndicator.close(); }); close undefined.

+1
source share
2 answers

Found a problem. The view model for the user modal was incorrect, so the close() method was undefined. Working view model:

 define(function () { var message = ko.observable(); var activityIndicator = { message: message, close: function() { this.modal.close(); } }; return activityIndicator;

});

0
source

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

+1
source

More articles:


All Articles