Aurelia -Dialog

Aurelia提供了一种实现对话(模态)窗口的方法.在本章中，我们将向您展示如何使用它.

步骤1  - 安装Dialog插件

Dialog插件可以从命令提示符

窗口.

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步 - 创建文件夹和文件

首先，我们将创建一个名为的新目录模态.我们将它放在 components 文件夹中.打开命令提示符并运行以下代码.

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

在此文件夹中，我们将创建两个新文件.这些文件将代表模式的视图和视图模型.

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

第3步 - 创建模态

首先，让我们来看看添加视图模型代码.我们需要导入和注入对话框控制器.该控制器用于处理模态特定功能.在下面的示例中，我们使用它来水平集中模式.

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

步骤4  - 触发模态

最后一步是触发模态的功能.我们需要导入并注入 DialogService .此服务的方法打开，我们可以从 my-modal 文件和模型传递 view-model ，所以我们可以动态绑定数据.

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