Aurelia - Hộp thoại

Aurelia cung cấp một cách để triển khai cửa sổ hộp thoại (phương thức). Trong chương này, chúng tôi sẽ hướng dẫn bạn cách sử dụng nó.

Bước 1 - Cài đặt Plugin hộp thoại

Plugin hộp thoại có thể được cài đặt từ command prompt cửa sổ.

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

Để plugin này hoạt động, chúng ta cần sử dụng bootstrapping thủ công. Chúng tôi đã đề cập đến vấn đề này trong chương Cấu hình. Phía trongmain.js tệp, chúng tôi cần thêm aurelia-dialog cắm vào.

main.js

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

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

Bước 2 - Tạo thư mục và tệp

Đầu tiên, chúng tôi sẽ tạo một thư mục mới có tên modal. Hãy đặt nó bên trongcomponentsthư mục. Mởcommand prompt và chạy đoạn mã sau.

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

Trong thư mục này, chúng tôi sẽ tạo hai tệp mới. Các tệp này sẽ đại diện choview và view-model cho phương thức của chúng tôi.

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

Bước 3 - Tạo phương thức

Đầu tiên, hãy thêm view-modelmã. Chúng tôi cần nhập khẩu và tiêmdialog-controller. Bộ điều khiển này được sử dụng để xử lý các chức năng cụ thể của phương thức. Trong ví dụ sau, chúng tôi đang sử dụng nó để tập trung một phương thức theo chiều ngang.

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

Các viewmã sẽ như thế này. Các nút khi nhấp vào sẽ mở hoặc đóng phương thức.

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>

Bước 4 - Kích hoạt một phương thức

Bước cuối cùng là một hàm để kích hoạt phương thức của chúng tôi. Chúng tôi cần nhập khẩu và tiêmDialogService. Dịch vụ này có phương phápopen, nơi chúng ta có thể vượt qua view-model từ my-modal tập tin và model, vì vậy chúng tôi có thể liên kết động dữ liệu.

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

Cuối cùng, chúng tôi sẽ tạo một nút để chúng tôi có thể gọi openModal chức năng.

app.html

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

Nếu chúng tôi chạy ứng dụng, chúng tôi có thể nhấp vào OPEN MODAL để kích hoạt một cửa sổ phương thức mới.