アウレリア-ダイアログ
Aureliaは、ダイアログ(モーダル)ウィンドウを実装する方法を提供します。この章では、その使用方法を説明します。
ステップ1-ダイアログプラグインをインストールする
ダイアログプラグインはからインストールできます command prompt 窓。
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フォルダ。を開きますcommand prompt 次のコードを実行します。
C:\Users\username\Desktop\aureliaApp\src\components>mkdir modal
このフォルダに、2つの新しいファイルを作成します。これらのファイルはview そして view-model 私たちのモーダルのために。
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-モーダルを作成する
まず、追加しましょう 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-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、通過できる場所 view-model から my-modal ファイルと 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
<template>
<button click.trigger = "openModal()">OPEN MODAL</button>
<template>
アプリを実行すると、 OPEN MODAL ボタンをクリックして、新しいモーダルウィンドウをトリガーします。