1

私はデュランダルを初めて使用するので、問題に対して間違ったアプローチを取っている可能性があります。

ユーザーがログイン ボタンをクリックしたときに、「ログインしています...しばらくお待ちください」というメッセージを含むモーダル ポップアップを表示したいと考えています。応答が受信されたら、モーダル ポップアップを閉じたい。私の試みたアプローチは、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