Aurelia - Người chuyển đổi

Nếu bạn cần chuyển đổi một số giá trị trong ứng dụng Aurelia, bạn có thể sử dụng converters thay vì chuyển đổi thủ công các giá trị sang định dạng mong muốn.

Ngày chuyển đổi

Khi chúng tôi muốn chuyển đổi giá trị ngày mặc định sang một số định dạng cụ thể, chúng tôi có thể sử dụng momentJSthư viện. Đây là một thư viện nhỏ được sử dụng để điều chỉnh ngày tháng.

C:\Users\username\Desktop\aureliaApp>jspm install moment

Hãy tạo một tệp mới converters.js. Chúng tôi sẽ sử dụng tệp này để thêm mã cụ thể cho trình chuyển đổi. Sử dụng lệnh sau hoặc tạo tệp theo cách thủ công.

C:\Users\username\Desktop\aureliaApp>touch converters.js

converter.js

Bên trong tệp này, chúng tôi sẽ nhập moment thư viện và bộ DateFormatValueConverterđể chỉ trả về giá trị tháng, ngày và năm mà không cần thêm dữ liệu. Điều quan trọng cần lưu ý là Aurelia có thể nhận ra bất kỳ lớp nào kết thúc bằngValueConverter. Đây là lý do tại sao tên lớp của chúng tôi làDateFormatValueConverter. Lớp học này sẽ được đăng ký làdateFormat và sau này chúng ta có thể sử dụng nó trong chế độ xem bên trong.

convert.js

import moment from 'moment';

export class DateFormatValueConverter {
   toView(value) {
      return moment(value).format('M/D/YYYY');
   }
}

Trong app.js, chúng tôi sẽ chỉ sử dụng ngày hiện tại. Đây sẽ là mô hình khung nhìn của chúng tôi.

app.js

export class App {
   constructor() {
      this.currentDate = new Date();
   }
}

Chúng tôi đã thảo luận require trong custom-elementschương. Ký hiệu đường ống | được sử dụng để áp dụng bộ chuyển đổi. Chúng tôi chỉ đang sử dụngdateFormat vì đây là cách Aurelia đăng ký DateFormatValueConverter.

app.html

<template>
   <require from = "./converters"></require>

   <h3>${currentDate | dateFormat}</h3>
</template>

Chuyển tiền tệ

Đây là một ví dụ về định dạng tiền tệ. Bạn sẽ nhận thấy rằng khái niệm cũng giống như trong ví dụ trên. Đầu tiên, chúng ta cần cài đặtnumeral thư viện từ command prompt.

C:\Users\username\Desktop\aureliaApp>jspm install numeral

Bộ chuyển đổi sẽ thiết lập định dạng tiền tệ.

convert.js

import numeral from 'numeral';

export class CurrencyFormatValueConverter {
   toView(value) {
      return numeral(value).format('($0,0.00)');
   }
}

View-model sẽ chỉ tạo ra một số ngẫu nhiên. Chúng tôi sẽ sử dụng giá trị này làm giá trị tiền tệ và cập nhật nó mỗi giây.

app.js

export class App {
   constructor() {
      this.update();
      setInterval(() => this.update(), 1000);
   }
   update() {
      this.myCurrency = Math.random() * 1000;
   }
}

Chế độ xem của chúng tôi sẽ hiển thị số được tạo ngẫu nhiên được chuyển đổi thành tiền tệ.

app.html

<template>
   <require from = "./converters"></require>

   <h3>${myCurrency | currencyFormat}</h3>
</template>