如何从该对话框中的视图模型关闭自定义 Durandal 对话框？答案

【问题标题】：How to close custom Durandal dialog from viewmodel within that dialog?如何从该对话框中的视图模型关闭自定义 Durandal 对话框？
【发布时间】：2015-09-22 11:59:03
【问题描述】：

我已经使用此处的示例设置了一个自定义对话框：Durandal 2.0 custom dialog，它工作正常。在该示例中，与“现有视图”等效的是我的登录表单，它具有通常的用户名/密码/登录按钮。

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

在我看来，对话框正在等待dialog.close(customModal,...')，因为那是打开它的视图模型。但是，由于我在登录视图中的级别低于该级别，我如何从该对话框中的视图模型中冒出关闭当前对话框的愿望？

主要调用视图模型：

    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 视图模型：

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;
});

【问题讨论】：

标签： modal-dialog durandal durandal-2.0

【解决方案1】：

我对代码进行了重构以解决这个问题。我决定不让中间人“自定义对话框”，而是将登录称为自定义对话框。我需要做的就是添加close 和show 方法（说实话可能甚至不需要原型）并直接使用它们：

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;

【讨论】：