Aurelia - Конвертеры

Если вам нужно преобразовать некоторые значения в приложении Aurelia, вы можете использовать converters вместо того, чтобы вручную преобразовывать значения в желаемый формат.

Конвертировать дату

Когда мы хотим преобразовать значение даты по умолчанию в какой-то конкретный формат, мы можем использовать momentJSбиблиотека. Это небольшая библиотека, используемая для управления датами.

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

Создадим новый файл converters.js. Мы будем использовать этот файл для добавления кода, специфичного для конвертера. Используйте следующую команду или создайте файл вручную.

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

Converter.js

Внутри этого файла мы импортируем moment библиотека и набор DateFormatValueConverterчтобы вернуть только значения месяца, дня и года без дополнительных данных. Важно отметить, что Аурелия может распознать любой класс, заканчивающийся наValueConverter. Вот почему имя нашего классаDateFormatValueConverter. Этот класс будет зарегистрирован какdateFormat и позже мы сможем использовать его изнутри.

convertters.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();
   }
}

Мы уже обсуждали require в custom-elementsглаву. Символ трубы | используется для применения преобразователя. Мы используем толькоdateFormat так как именно так регистрируется Аурелия DateFormatValueConverter.

app.html

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

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

Конвертировать валюту

Это пример форматирования валюты. Вы заметите, что концепция такая же, как в приведенном выше примере. Для начала нам нужно установитьnumeral библиотека из command prompt.

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

Конвертер установит формат валюты.

convertters.js

import numeral from 'numeral';

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

View-model просто сгенерирует случайное число. Мы будем использовать это значение в валюте и обновлять его каждую секунду.

app.js

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

Наше представление покажет случайно сгенерированное число, преобразованное в валюту.

app.html

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

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