Учебники

Аурелия — Конвертеры

Январь 1, 2019

Если вам нужно преобразовать некоторые значения в приложении 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;
   }
}

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

41
Share: