Aurelia - Dialogo
Aurelia offre un modo per implementare la finestra di dialogo (modale). In questo capitolo ti mostreremo come usarlo.
Passaggio 1: installare un plug-in di dialogo
Il plug-in di dialogo può essere installato dal command prompt finestra.
C:\Users\username\Desktop\aureliaApp>jspm install aurelia-dialog 
    Affinché questo plugin funzioni, è necessario utilizzare il bootstrap manuale. Ne abbiamo parlato nel capitolo Configurazione. Dentromain.js file, dobbiamo aggiungere il file aurelia-dialog collegare.
main.js
export function configure(aurelia) {
   aurelia.use
   .standardConfiguration()
   .developmentLogging()
   .plugin('aurelia-dialog'); 
   aurelia.start().then(() => aurelia.setRoot());
} 
    Passaggio 2: creare cartelle e file
Per prima cosa, creeremo una nuova directory chiamata modal. Posizioniamolo all'interno del filecomponentscartella. Apri ilcommand prompt ed eseguire il codice seguente.
C:\Users\username\Desktop\aureliaApp\src\components>mkdir modal 
    In questa cartella creeremo due nuovi file. Questi file rappresenterannoview e view-model per il nostro 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 
    Passaggio 3: creare un modale
Per prima cosa, aggiungiamo view-modelcodice. Dobbiamo importare e iniettaredialog-controller. Questo controller viene utilizzato per la gestione di funzionalità modali specifiche. Nell'esempio seguente, lo stiamo utilizzando per centralizzare un modale orizzontalmente.
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;
   }
} 
    Il viewil codice sarà simile a questo. I pulsanti quando cliccati apriranno o chiuderanno il modale.
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> 
    Passaggio 4: attivare un modale
L'ultimo passaggio è una funzione per attivare il nostro modale. Dobbiamo importare e iniettareDialogService. Questo servizio ha metodoopen, dove possiamo passare view-model a partire dal my-modal file e model, quindi possiamo associare dinamicamente i dati.
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);
      });
   }
}; 
    Infine, creeremo un pulsante in modo da poter chiamare openModal funzione.
app.html
<template>
   <button click.trigger = "openModal()">OPEN MODAL</button>
<template> 
    Se eseguiamo l'app, possiamo fare clic su OPEN MODAL pulsante per attivare una nuova finestra modale.
                    