Aurelia提供了一种实现对话(模态)窗口的方法.在本章中,我们将向您展示如何使用它.
Dialog插件可以从命令提示符
窗口.
C:\Users\username\Desktop\aureliaApp>jspm install aurelia-dialog
为了使这个插件正常工作,我们需要使用手动引导.我们在配置章节中介绍了这一点.在 main.js 文件中,我们需要添加 aurelia-dialog 插件.
export function configure(aurelia) { aurelia.use .standardConfiguration() .developmentLogging() .plugin('aurelia-dialog'); aurelia.start().then(() => aurelia.setRoot()); }
首先,我们将创建一个名为的新目录模态.我们将它放在 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
首先,让我们来看看添加视图模型代码.我们需要导入和注入对话框控制器.该控制器用于处理模态特定功能.在下面的示例中,我们使用它来水平集中模式.
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; } }
视图代码如下所示.单击按钮将打开或关闭模式.
<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>
最后一步是触发模态的功能.我们需要导入并注入 DialogService .此服务的方法打开,我们可以从 my-modal 文件和模型传递 view-model ,所以我们可以动态绑定数据.
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 函数.
<template> <button click.trigger = "openModal()">OPEN MODAL</button> <template>
如果我们运行应用程序,我们可以点击 OPEN MODAL 按钮来触发新的模态窗口.