防止aurelia对话框关闭

防止aurelia对话框关闭,aurelia,Aurelia,嗨,我可以得到一个基本的对话框运行,但我想保持对话,并关闭它自己。可能吗 当前单击“确定”按钮将立即删除该对话框 基本上,我希望该对话框作为带有用户名/密码的登录框。在登录attemts失败时,我希望在对话框上显示错误消息,而不是关闭它 我的模板是 <template> <ai-dialog> <ai-dialog-header> </ai-dialog-header> <ai-dialog-body>

嗨,我可以得到一个基本的对话框运行,但我想保持对话,并关闭它自己。可能吗

当前单击“确定”按钮将立即删除该对话框

基本上,我希望该对话框作为带有用户名/密码的登录框。在登录attemts失败时,我希望在对话框上显示错误消息,而不是关闭它

我的模板是

<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>
我是从另一个模块打电话的,比如

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

    })

  });

谢谢

是的,这是可能的——实际上非常简单。这里的解决方案是在(或除非)您想关闭对话框之前,不要使用
controller.ok()
controller.cancel()

在您的情况下,我不完全确定您为什么要从按钮调用
controller.ok()
,但您可以这样做:

<ai-dialog-footer>
  <button click.trigger="tryLogin(auth)">Ok</button>
</ai-dialog-footer>

我希望这是有道理的。本质上,模态中的视图只是另一个Aurelia视图和viewmodel对-它与应用程序中的任何其他视图都没有区别。
controller.ok()
.cancel()
方法用于关闭对话框并将控件返回给调用者。但是,只要您在对话框中,就可以在应用程序的其他地方执行任何操作。

使用
openAndYieldController()
()我应该提到我尝试过使用openAndYieldController。我已经编辑了问题。您正在对话框中加载哪个视图?您应该能够通过对话框中的viewmodel来控制它。我还没有看到您的视图,但我认为您可能正在使用ai对话框页脚元素,对吗?如果是,则该元素具有预定义的行为。您可以选择不使用它,自己实现该行为。如果这就是你正在做的,我会发布一个关于这个案例场景的详细答案。谢谢我使用ai对话页脚。我已经更新了我的问题以显示代码。太好了!看了之后,感觉非常好。谢谢
<ai-dialog-footer>
  <button click.trigger="tryLogin(auth)">Ok</button>
</ai-dialog-footer>
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);
      });
  }
}