首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >问答首页 >防止aurelia-对话框关闭

防止aurelia-对话框关闭
EN

Stack Overflow用户
提问于 2016-10-21 11:56:50
回答 1查看 818关注 0票数 1

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

当前,单击OK按钮将不受限制地删除对话框。

基本上,我希望对话框具有用户名/密码作为登录框。在失败的登录记录中,我想在对话框上显示一个错误消息,而不是关闭它。

我的模板是

代码语言:javascript
运行
复制
<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>

和模型

代码语言:javascript
运行
复制
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;
  }
}

我是从另一个模块打电话来的

代码语言:javascript
运行
复制
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);

    })

  });

谢谢

EN

回答 1

Stack Overflow用户

回答已采纳

发布于 2016-10-21 19:01:45

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

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

代码语言:javascript
运行
复制
<ai-dialog-footer>
  <button click.trigger="tryLogin(auth)">Ok</button>
</ai-dialog-footer>

...and在您的viewModel中:

代码语言:javascript
运行
复制
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()方法被设计为关闭对话框并将控制返回给调用者。但是,只要您在对话框中,您就可以在应用程序的其他地方执行任何操作。

票数 1
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/40176117

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档