アウレリア-ダイアログ

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

このフォルダーに、2つの新しいファイルを作成します。これらのファイルは、モーダルの view および view-model を表します。

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

ステップ3-モーダルを作成する

まず、 view-model コードを追加しましょう。 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;
   }
}

*view* コードは次のようになります。 ボタンをクリックすると、モーダルが開閉します。

my-modall

<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 ファイルと model から 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 関数を呼び出すことができます。

appl

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

アプリを実行する場合、 OPEN MODAL ボタンをクリックして、新しいモーダルウィンドウをトリガーできます。

Aurelia Dialog Modal

Aurelia-dialog

目次