Aurelia - Convertidores

Si necesita convertir algunos valores en la aplicación Aurelia, puede usar converters en lugar de convertir manualmente los valores al formato deseado.

Convertir fecha

Cuando queremos convertir el valor de fecha predeterminado a algún formato específico, podemos usar momentJSbiblioteca. Esta es una pequeña biblioteca que se utiliza para manipular fechas.

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

Creemos un nuevo archivo converters.js. Usaremos este archivo para agregar código específico del convertidor. Utilice el siguiente comando o cree el archivo manualmente.

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

converter.js

Dentro de este archivo, importaremos moment biblioteca y set DateFormatValueConverterpara devolver solo valores de mes, día y año sin datos adicionales. Lo importante a tener en cuenta es que Aurelia puede reconocer cualquier clase que termine conValueConverter. Por eso nuestro nombre de clase esDateFormatValueConverter. Esta clase se registrará comodateFormat y luego podemos usarlo dentro de la vista.

converters.js

import moment from 'moment';

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

En app.js, solo usaremos la fecha actual. Este será nuestro modelo de vista.

app.js

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

Ya discutimos require en custom-elementscapítulo. El símbolo de la tubería | se utiliza para aplicar el convertidor. Solo estamos usandodateFormat ya que así va registrando Aurelia DateFormatValueConverter.

app.html

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

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

Convertir moneda

Este es un ejemplo de formato de moneda. Notará que el concepto es el mismo que en el ejemplo anterior. Primero, necesitamos instalarnumeral biblioteca de la command prompt.

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

El convertidor establecerá el formato de moneda.

converters.js

import numeral from 'numeral';

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

View-model solo generará un número aleatorio. Usaremos esto como valor de moneda y lo actualizaremos cada segundo.

app.js

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

Nuestra vista mostrará el número generado aleatoriamente transformado como moneda.

app.html

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

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