Aurelia - conversores

Se você precisar converter alguns valores no aplicativo Aurelia, você pode usar converters em vez de converter manualmente os valores em um formato desejado.

Converter data

Quando queremos converter o valor de data padrão para algum formato específico, podemos usar momentJSbiblioteca. Esta é uma pequena biblioteca usada para manipular datas.

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

Vamos criar um novo arquivo converters.js. Usaremos este arquivo para adicionar código específico do conversor. Use o seguinte comando ou crie o arquivo manualmente.

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

converter.js

Dentro deste arquivo, iremos importar moment biblioteca e conjunto DateFormatValueConverterpara retornar apenas valores de mês, dia e ano sem dados adicionais. Uma coisa importante a notar é que Aurelia pode reconhecer qualquer classe que termine comValueConverter. É por isso que o nome da nossa classe éDateFormatValueConverter. Esta turma será registrada comodateFormat e depois podemos usá-lo na visão interna.

converters.js

import moment from 'moment';

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

Dentro app.js, usaremos apenas a data atual. Este será o nosso modelo de visão.

app.js

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

Já discutimos require dentro custom-elementscapítulo. O símbolo do tubo | é usado para aplicar o conversor. Estamos apenas usandodateFormat já que é assim que Aurelia está registrando DateFormatValueConverter.

app.html

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

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

Converter moeda

Este é um exemplo de formatação de moeda. Você notará que o conceito é o mesmo do exemplo acima. Primeiro, precisamos instalarnumeral biblioteca da command prompt.

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

O conversor definirá o formato da moeda.

converters.js

import numeral from 'numeral';

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

O modelo de visualização irá gerar apenas um número aleatório. Vamos usar isso como valor de moeda e atualizá-lo a cada segundo.

app.js

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

Nossa visão mostrará o número gerado aleatoriamente transformado em moeda.

app.html

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

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