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>

如果我們執行應用程式，我們可以單擊**開啟模態視窗**按鈕來觸發一個新的模態視窗。