嗨,我可以得到一个基本的对话框运行,但我想保持对话,并关闭它自己。这有可能吗?
当前,单击OK按钮将不受限制地删除对话框。
基本上,我希望对话框具有用户名/密码作为登录框。在失败的登录记录中,我想在对话框上显示一个错误消息,而不是关闭它。
我的模板是
<template>
<ai-dialog>
<ai-dialog-header>
</ai-dialog-header>
<ai-dialog-body>
<h2>Username:</h2>
<input value.bind="auth.username" attach-focus="true" />
<br />
<h2>Password:</h2>
<input value.bind="auth.password" attach-focus="false" />
<br /><br />
<span innerhtml.bind="auth.error">No Error</span>
</ai-dialog-body>
<ai-dialog-footer>
<button click.trigger="controller.ok(auth)">Ok</button>
</ai-dialog-footer>
</ai-dialog>
</template>
和模型
import {DialogController} from 'aurelia-dialog';
export class Login {
static inject = [DialogController];
auth = { username: '', password: '', error: '' };
constructor(private controller : DialogController){
this.controller = controller;
}
activate(auth){
this.auth = auth;
}
}
我是从另一个模块打电话来的
let auth = { username: 'Wade', password: 'Watts', error : ""};
this.dialogService.openAndYieldController({viewModel: Login, model: auth}).then(controller => {
// Note you get here when the dialog is opened, and you are able to close dialog
// Promise for the result is stored in controller.result property
controller.result.then((response) => {
if (!response.wasCancelled) {
console.log('good');
} else {
console.log('bad');
}
console.log(response);
})
});
谢谢
发布于 2016-10-21 19:01:45
是的,这是可能的-而且实际上很简单。这里的解决方案是在(或除非)关闭对话框之前不要使用controller.ok()
或controller.cancel()
。
在您的例子中,我不完全确定您为什么要从按钮中调用controller.ok()
,但是您可以这样做:
<ai-dialog-footer>
<button click.trigger="tryLogin(auth)">Ok</button>
</ai-dialog-footer>
...and在您的viewModel中:
import {DialogController} from 'aurelia-dialog';
export class Login {
static inject = [DialogController];
auth = { username: '', password: '', error: '' };
constructor(private controller : DialogController){
this.controller = controller;
}
activate(auth){
this.auth = auth;
}
tryLogin (auth) {
myLoginService.login(auth)
.then((success) => {
if (success) this.controller.ok(auth);
});
}
}
我希望这是有意义的。本质上,您的模式中的视图只是另一个Aurelia视图和视图模型对-它与应用程序中的任何其他视图没有什么不同。controller.ok()
和.cancel()
方法被设计为关闭对话框并将控制返回给调用者。但是,只要您在对话框中,您就可以在应用程序的其他地方执行任何操作。
https://stackoverflow.com/questions/40176117
复制相似问题