Question

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

当用户点击登录按钮时，我想显示一个模式弹出窗口，其中包含“登录...请等待”的消息。我想在收到回复后关闭模态弹出窗口。我尝试的方法是使用Durandal的app.showModal和一个没有按钮的视图从登录视图模型调用自定义模式弹出窗口。这显示了我之后的模态弹出窗口，但是一旦收到服务器响应，我就无法弄清楚如何关闭弹出窗口。我看到的所有示例都在模式弹出视图中有一个关闭弹出窗口的按钮。

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

以下是登录视图的视图模型代码（删除了无关代码）：

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 post调用。自定义模式的视图模型是：

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() { activityIndicator.close(); }); close的错误未定义。

Answer 1

对于使用Durandal 2.0的任何人，请注意以上标记的答案仅适用于早期的1.x版本。快乐的编码！

Answer 2

发现问题。自定义模式的viewmodel是错误的，因此close()方法未定义。工作视图模型是：

define(function () {

var message = ko.observable();

var activityIndicator = {
    message: message,

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

return activityIndicator;

}）;

以编程方式关闭Durandal模式

2 个答案: