1

我是 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

4

2 回答 2

1

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

于 2013-08-21T20:20:47.303 回答
0

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

define(function () {

var message = ko.observable();

var activityIndicator = {
    message: message,

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

return activityIndicator;

});

于 2013-08-16T05:55:58.010 回答