Aurelia - 对话框

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

步骤 1 - 安装对话框插件

对话框插件可以从**命令提示符**窗口安装。

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**文件夹内。打开**命令提示符**并运行以下代码。

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

在这个文件夹中，我们将创建两个新文件。这两个文件将代表我们模态窗口的**视图**和**视图模型**。

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 - 创建模态窗口

首先，让我们添加**视图模型**代码。我们需要导入并注入**dialog-controller**。此控制器用于处理模态窗口的特定功能。在下面的示例中，我们使用它来水平居中模态窗口。

my-modal.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;
   }
}

**视图**代码如下所示。点击按钮将打开或关闭模态窗口。

my-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**方法，我们可以在其中传递来自**my-modal**文件的**视图模型**和**模型**，以便我们可以动态绑定数据。

app.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**函数。

app.html

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

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