Учебники

Аурелия — Диалог

Январь 1, 2019

Aurelia предлагает способ реализации диалогового (модального) окна. В этой главе мы покажем вам, как его использовать.

Шаг 1 — Установите плагин диалога

Плагин Dialog может быть установлен из окна командной строки . 

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 . Давайте разместим его в папке компонентов . Откройте командную строку и запустите следующий код. 

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 — Создайте модальный

Сначала добавим код модели представления . Нам нужно импортировать и ввести диалог-контроллер . Этот контроллер используется для обработки специфических модальных функций. В следующем примере мы используем его, чтобы централизовать модальное положение по горизонтали.

мой-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;
   }
}

Код вида будет выглядеть следующим образом. Кнопки при нажатии открывают или закрывают модальные.

мой-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 и модели , чтобы мы могли динамически связывать данные.

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 , чтобы вызвать новое модальное окно.

46
Share: