Aurelia - Pengonversi
Jika Anda perlu mengonversi beberapa nilai di aplikasi Aurelia, Anda dapat menggunakan converters alih-alih mengonversi nilai secara manual ke format yang diinginkan.
Ubah Tanggal
Saat kami ingin mengubah nilai tanggal default ke beberapa format tertentu, kami dapat menggunakan momentJSPerpustakaan. Ini adalah perpustakaan kecil yang digunakan untuk memanipulasi tanggal.
C:\Users\username\Desktop\aureliaApp>jspm install moment
Mari buat file baru converters.js. Kami akan menggunakan file ini untuk menambahkan kode khusus konverter. Gunakan perintah berikut atau buat file secara manual.
C:\Users\username\Desktop\aureliaApp>touch converters.js
converter.js
Di dalam file ini, kami akan mengimpor moment perpustakaan dan set DateFormatValueConverteruntuk hanya mengembalikan nilai bulan, hari dan tahun tanpa data tambahan. Hal penting yang perlu diperhatikan adalah Aurelia dapat mengenali semua kelas yang diakhiri denganValueConverter. Inilah mengapa nama kelas kami adalahDateFormatValueConverter. Kelas ini akan didaftarkan sebagaidateFormat dan nanti dapat digunakan dalam tampilan dalam.
converters.js
import moment from 'moment';
export class DateFormatValueConverter {
toView(value) {
return moment(value).format('M/D/YYYY');
}
}
Di app.js, kami hanya akan menggunakan tanggal sekarang. Ini akan menjadi model tampilan kita.
app.js
export class App {
constructor() {
this.currentDate = new Date();
}
}
Kami sudah berdiskusi require di custom-elementsbab. Simbol pipa | digunakan untuk menerapkan konverter. Kami hanya menggunakandateFormat karena beginilah cara Aurelia mendaftar DateFormatValueConverter.
app.html
<template>
<require from = "./converters"></require>
<h3>${currentDate | dateFormat}</h3>
</template>
Konversi Mata Uang
Ini adalah contoh format mata uang. Anda akan melihat bahwa konsepnya sama dengan contoh di atas. Pertama, kita perlu menginstalnumeral perpustakaan dari command prompt.
C:\Users\username\Desktop\aureliaApp>jspm install numeral
Konverter akan mengatur format mata uang.
converters.js
import numeral from 'numeral';
export class CurrencyFormatValueConverter {
toView(value) {
return numeral(value).format('($0,0.00)');
}
}
Model tampilan hanya akan menghasilkan nomor acak. Kami akan menggunakan ini sebagai nilai mata uang dan memperbaruinya setiap detik.
app.js
export class App {
constructor() {
this.update();
setInterval(() => this.update(), 1000);
}
update() {
this.myCurrency = Math.random() * 1000;
}
}
Tampilan kami akan menunjukkan angka yang dibuat secara acak yang diubah sebagai mata uang.
app.html
<template>
<require from = "./converters"></require>
<h3>${myCurrency | currencyFormat}</h3>
</template>