如何从该对话框中的viewmodel关闭自定义Durandal对话框?

时间:2015-09-22 11:59:03

标签: modal-dialog durandal durandal-2.0

我使用此处的示例设置了一个自定义对话框:Durandal 2.0 custom dialog并且它工作正常。我相当于该示例中的“现有视图”是我的登录表单,其中包含通常的用户名/密码/登录按钮。

登录按钮提交表单,这会进行远程webapi调用以验证用户。到目前为止一切正常。如果登录成功,我想关闭对话框,但我无法让它工作 - 它只是保持打开状态。

在我看来,对话框期待dialog.close(customModal,...'),因为那是打开它的viewmodel。但是,由于我在登录视图中的水平较低,如何从该对话框中的视图模型中清除关闭当前对话框的愿望?

主调用viewmodel执行:

    Existing = require('./login')
    ...

    this.dialog = new CustomDialog('My title', new Existing());
    this.dialog.show().then(function (response) {
        //check login results and do whatever is necessary here...
    });

CustomModal viewmodel:

define(['plugins/dialog'], function (dialog) {
    var CustomModal = function (title, model) {
        this.title = title;
        this.model = model;
};

CustomModal.prototype.ok = function () {
    dialog.close(this, this.model);
};

CustomModal.prototype.show = function () {
    return dialog.show(this);
};

return CustomModal;

});

登录viewmodel:

define([
    'jquery',
    'knockout',
    'datacontext',
    'plugins/dialog'
], function ($, ko, dc, dialog) {
    var vmLogin = function () {
        var self = this;

        self.user = ko.observable('');
        self.password = ko.observable();

        self.doLogin = function () {

            return dc.doLogin(self.user, self.password)
                .done(function (data) {
                    if (data.success == true) { //logged in ok
                        dialog.close(self);
                    } else { //failed to log in
                        //todo: display error message
                    }
                })
            .fail(function (jqXHR, textStatus, errorThrown) {
                //
            });
        }
    };

    return vmLogin;
});

1 个答案:

答案 0 :(得分:0)

我有点重构代码来解决这个问题。我决定不让中间人“自定义对话框”,而是将登录称为自定义对话框。我需要做的就是添加closeshow方法(可能甚至不需要原型)并直接使用它们:

var vmLogin = function () {
    var self = this;

    self.user = ko.observable('');
    self.password = ko.observable();

    self.doLogin = function () {
        var self = this;

        return dc.doLogin(self.user, self.password)
            .done(function (data, p2, p3) {
                if (data.success == true) { //logged in ok
                    dialog.close(self, null);
                } else { //failed to log in
                    //TODO: Show message
                }
            })
        .fail(function (jqXHR, textStatus, errorThrown) {
            //
        });
    }

    vmLogin.prototype.close = function () {
        dialog.close(this, null);
    };

    vmLogin.prototype.show = function () {
        return dialog.show(this);
    };

};

return vmLogin;
相关问题