Aurelia - 对话框

• 

  简述

  Aurelia 提供了一种实现对话框（模态）窗口的方法。在本章中，我们将向您展示如何使用它。
• 

  第 1 步 - 安装对话框插件

  对话框插件可以从安装command prompt窗户。

  
  C:\Users\username\Desktop\aureliaApp>jspm install aurelia-dialog
  

  为了让这个插件工作，我们需要使用手动引导。我们在配置章节中介绍了这一点。里面main.js文件，我们需要添加aurelia-dialog插入。

  main.js

  
  export function configure(aurelia) {
     aurelia.use
     .standardConfiguration()
     .developmentLogging()
     .plugin('aurelia-dialog'); 
     aurelia.start().then(() => aurelia.setRoot());
  }
  

• 

  第 2 步 - 创建文件夹和文件

  首先，我们将创建一个名为的新目录modal. 让我们把它放在里面components文件夹。打开command prompt并运行以下代码。

  
  C:\Users\username\Desktop\aureliaApp\src\components>mkdir modal
  

  在这个文件夹中，我们将创建两个新文件。这些文件将代表view和view-model对于我们的模态。

  
  C:\Users\username\Desktop\aureliaApp\src\components\modal>touch my-modal.html
  C:\Users\username\Desktop\aureliaApp\src\components\modal>touch my-modal.js
  

• 

  第 3 步 - 创建模态

  首先，让我们添加view-model代码。我们需要导入和注入dialog-controller. 该控制器用于处理特定模式的功能。在下面的示例中，我们使用它来水平集中模态。

  我的模态.js

  
  import {inject} from 'aurelia-framework';
  import {DialogController} from 'aurelia-dialog';
  @inject(DialogController)
  export class Prompt {
     constructor(controller) {
        this.controller = controller;
        this.answer = null;
        controller.settings.centerHorizontalOnly = true;
     }
     activate(message) {
        this.message = message;
     }
  }
  

  这view代码将如下所示。单击按钮时将打开或关闭模式。

  我的-modal.html

  
  <template>
     <ai-dialog>
        <ai-dialog-body>
           <h2>${message}</h2>
        </ai-dialog-body>
        <ai-dialog-footer>
           <button click.trigger = "controller.cancel()">Cancel</button>
           <button click.trigger = "controller.ok(message)">Ok</button>
        </ai-dialog-footer> 
     </ai-dialog>   
  </template>
  

• 

  第 4 步 - 触发模态

  最后一步是触发我们的模态的函数。我们需要导入和注入DialogService. 该服务有方法open, 我们可以通过的地方view-model从my-modal文件和model，所以我们可以动态绑定数据。

  应用程序.js

  
  import {DialogService} from 'aurelia-dialog';
  import {inject} from 'aurelia-framework';
  import {Prompt} from './components/modal/my-modal';
  @inject(DialogService)
  export class App {
     constructor(dialogService) {
        this.dialogService = dialogService;
     }
     openModal() {
        this.dialogService.open( {viewModel: Prompt, model: 'Are you sure?' }).then(response => {
           console.log(response);
              
           if (!response.wasCancelled) {
              console.log('OK');
           } else {
              console.log('cancelled');
           }
           console.log(response.output);
        });
     }
  };
  

  最后，我们将创建一个按钮，以便我们可以调用openModal功能。

  应用程序.html

  
  <template>
     <button click.trigger = "openModal()">OPEN MODAL</button>
  <template>
  

  如果我们运行应用程序，我们可以单击OPEN MODAL按钮触发一个新的模态窗口。