我使用此处的示例设置了一个自定义对话框: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;
});
答案 0 :(得分:0)
我有点重构代码来解决这个问题。我决定不让中间人“自定义对话框”,而是将登录称为自定义对话框。我需要做的就是添加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;