Если вам нужно преобразовать некоторые значения в приложении Aurelia, вы можете использовать конвертеры вместо ручного преобразования значений в желаемый формат.
Дата конвертации
Когда мы хотим преобразовать значение даты по умолчанию в какой-то определенный формат, мы можем использовать библиотеку momentJS . Это небольшая библиотека, используемая для манипулирования датами.
C:\Users\username\Desktop\aureliaApp>jspm install moment
Давайте создадим новый файл convertters.js . Мы будем использовать этот файл для добавления кода, специфичного для конвертера. Используйте следующую команду или создайте файл вручную.
C:\Users\username\Desktop\aureliaApp>touch converters.js
converter.js
Внутри этого файла мы импортируем библиотеку моментов и установим DateFormatValueConverter, чтобы она возвращала только значения месяца, дня и года без дополнительных данных. Важно отметить, что Aurelia может распознавать любой класс, заканчивающийся ValueConverter . Вот почему наш класс называется DateFormatValueConverter . Этот класс будет зарегистрирован как dateFormat, и мы позже сможем использовать его внутри представления.
converters.js
import moment from 'moment'; export class DateFormatValueConverter { toView(value) { return moment(value).format('M/D/YYYY'); } }
В app.js мы просто будем использовать текущую дату. Это будет наша модель.
app.js
export class App { constructor() { this.currentDate = new Date(); } }
Мы уже обсуждали требование в главе пользовательских элементов . Символ трубы | используется для применения конвертера. Мы используем только dateFormat, так как Aurelia регистрирует DateFormatValueConverter .
app.html
<template> <require from = "./converters"></require> <h3>${currentDate | dateFormat}</h3> </template>
Конвертировать валюту
Это пример форматирования валюты. Вы заметите, что концепция такая же, как в приведенном выше примере. Во-первых, нам нужно установить цифровую библиотеку из командной строки .
C:\Users\username\Desktop\aureliaApp>jspm install numeral
Конвертер установит формат валюты.
converters.js
import numeral from 'numeral'; export class CurrencyFormatValueConverter { toView(value) { return numeral(value).format('($0,0.00)'); } }
View-модель просто сгенерирует случайное число. Мы будем использовать это в качестве значения валюты и будем обновлять его каждую секунду.
app.js
export class App { constructor() { this.update(); setInterval(() => this.update(), 1000); } update() { this.myCurrency = Math.random() * 1000; } }
Наше представление покажет случайно сгенерированное число, преобразованное в валюту.