Aurelia - Dialogue

Aurelia offre un moyen d'implémenter une fenêtre de dialogue (modale). Dans ce chapitre, nous allons vous montrer comment l'utiliser.

Étape 1 - Installer un plugin de dialogue

Le plugin de dialogue peut être installé à partir du command prompt la fenêtre.

C:\Users\username\Desktop\aureliaApp>jspm install aurelia-dialog

Pour que ce plugin fonctionne, nous devons utiliser le bootstrap manuel. Nous avons couvert cela dans le chapitre Configuration. À l'intérieurmain.js fichier, nous devons ajouter le aurelia-dialog brancher.

main.js

export function configure(aurelia) {
   aurelia.use
   .standardConfiguration()
   .developmentLogging()
   .plugin('aurelia-dialog'); 

   aurelia.start().then(() => aurelia.setRoot());
}

Étape 2 - Créer des dossiers et des fichiers

Tout d'abord, nous allons créer un nouveau répertoire appelé modal. Plaçons-le à l'intérieur ducomponentsdossier. Ouvrez lecommand prompt et exécutez le code suivant.

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

Dans ce dossier, nous allons créer deux nouveaux fichiers. Ces fichiers représenterontview et view-model pour notre 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

Étape 3 - Créer un modal

Tout d'abord, ajoutons view-modelcode. Nous devons importer et injecterdialog-controller. Ce contrôleur est utilisé pour gérer les fonctionnalités spécifiques au mode. Dans l'exemple suivant, nous l'utilisons pour centraliser un modal horizontalement.

mon-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;
   }
}

le viewle code ressemblera à ceci. Les boutons lorsque vous cliquez dessus ouvriront ou fermeront le modal.

mon-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>

Étape 4 - Déclenchez un modal

La dernière étape est une fonction de déclenchement de notre modal. Nous devons importer et injecterDialogService. Ce service a une méthodeopen, où nous pouvons passer view-model de my-modal fichier et model, afin que nous puissions lier dynamiquement les données.

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);
      });
   }
};

Enfin, nous allons créer un bouton pour pouvoir appeler openModal fonction.

app.html

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

Si nous exécutons l'application, nous pouvons cliquer sur le bouton OPEN MODAL bouton pour déclencher une nouvelle fenêtre modale.