Запретить закрытие aurelia-dialog

#aurelia

Вопрос:

Привет, я могу запустить базовый диалог, но я хотел бы сохранить диалог и закрыть его сам. Возможно ли это?

Текущее нажатие на кнопку 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);

    })

  });

Спасибо

1. используйте openAndYieldController() ( github.com/aurelia /… )

2. Я должен был упомянуть, что я пытался использовать openAndYieldController. Я отредактировал вопрос.

3. Какое представление вы загружаете внутри своего диалога? Вы должны иметь возможность управлять этим через viewmodel внутри вашего диалогового окна.

4. Я не видел ваше представление, но я думаю, что вы, вероятно, используете элемент нижнего колонтитула ai-dialog, верно? Если это так, то этот элемент имеет предопределенное поведение. Вы можете отказаться от его использования и реализовать это поведение самостоятельно. Если это то, что вы делаете, я опубликую подробный ответ для этого сценария.

5. Спасибо, я использую ai-dialog-footer. Я обновил свой вопрос, чтобы показать код.

Ответ №1:

Да, это возможно — и довольно просто, на самом деле. Решение здесь заключается в том, чтобы не использовать controller.ok() or controller.cancel() до тех пор, пока (или если только) вы не захотите закрыть диалоговое окно.

В вашем случае я не совсем уверен, почему вы вызываете controller.ok() со своей кнопки, но вы могли бы сделать что-то вроде этого:

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

… и в вашей 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 view и viewmodel — оно ничем не отличается от любого другого представления в вашем приложении. Методы controller.ok() и .cancel() предназначены для закрытия диалога и возврата управления вызывающей стороне. Однако, пока вы находитесь внутри диалогового окна, вы можете делать все, что могли бы делать в другом месте приложения.