Aurelia - Convertitori

Se devi convertire alcuni valori nell'app Aurelia, puoi usare converters invece di convertire manualmente i valori nel formato desiderato.

Converti data

Quando vogliamo convertire il valore di data predefinito in un formato specifico, possiamo usare momentJSbiblioteca. Questa è una piccola libreria usata per manipolare le date.

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

Creiamo un nuovo file converters.js. Useremo questo file per aggiungere codice specifico del convertitore. Usa il seguente comando o crea il file manualmente.

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

converter.js

All'interno di questo file, importeremo moment biblioteca e set DateFormatValueConverterper restituire solo i valori di mese, giorno e anno senza dati aggiuntivi. La cosa importante da notare è che Aurelia può riconoscere qualsiasi classe con cui finisceValueConverter. Questo è il motivo per cui il nome della nostra classe èDateFormatValueConverter. Questa classe verrà registrata comedateFormat e in seguito possiamo usarlo vista interna.

convertters.js

import moment from 'moment';

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

In app.js, useremo solo la data corrente. Questo sarà il nostro modello di visualizzazione.

app.js

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

Ne abbiamo già discusso require in custom-elementscapitolo. Il simbolo della pipa | viene utilizzato per applicare il convertitore. Stiamo solo usandodateFormat poiché è così che si registra Aurelia DateFormatValueConverter.

app.html

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

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

Converti valuta

Questo è un esempio di formattazione della valuta. Noterai che il concetto è lo stesso dell'esempio sopra. Per prima cosa, dobbiamo installarenumeral libreria dal command prompt.

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

Il convertitore imposterà il formato della valuta.

convertters.js

import numeral from 'numeral';

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

View-model genererà solo un numero casuale. Lo useremo come valore della valuta e lo aggiorneremo ogni secondo.

app.js

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

La nostra visualizzazione mostrerà il numero generato casualmente trasformato come valuta.

app.html

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

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