Aurelia - Konverter
Wenn Sie einige Werte in der Aurelia-App konvertieren müssen, können Sie verwenden converters anstatt Werte manuell in ein gewünschtes Format zu konvertieren.
Datum konvertieren
Wenn wir den Standard-Datumswert in ein bestimmtes Format konvertieren möchten, können wir verwenden momentJSBibliothek. Dies ist eine kleine Bibliothek zum Bearbeiten von Datumsangaben.
C:\Users\username\Desktop\aureliaApp>jspm install moment
Lassen Sie uns eine neue Datei erstellen converters.js. Wir werden diese Datei verwenden, um konverterspezifischen Code hinzuzufügen. Verwenden Sie den folgenden Befehl oder erstellen Sie die Datei manuell.
C:\Users\username\Desktop\aureliaApp>touch converters.js
converter.js
In diese Datei werden wir importieren moment Bibliothek und Set DateFormatValueConverterum nur Monats-, Tages- und Jahreswerte ohne zusätzliche Daten zurückzugeben. Wichtig zu beachten ist, dass Aurelia jede Klasse erkennen kann, die mit endetValueConverter. Deshalb ist unser KlassennameDateFormatValueConverter. Diese Klasse wird als registriertdateFormat und wir können es später in der Innenansicht verwenden.
converters.js
import moment from 'moment';
export class DateFormatValueConverter {
toView(value) {
return moment(value).format('M/D/YYYY');
}
}
Im app.jsWir werden nur das aktuelle Datum verwenden. Dies wird unser Sichtmodell sein.
app.js.
export class App {
constructor() {
this.currentDate = new Date();
}
}
Wir haben bereits diskutiert require im custom-elementsKapitel. Das Rohrsymbol | wird verwendet, um den Konverter anzuwenden. Wir verwenden nurdateFormat denn so registriert sich Aurelia DateFormatValueConverter.
app.html
<template>
<require from = "./converters"></require>
<h3>${currentDate | dateFormat}</h3>
</template>
Geld umtauschen
Dies ist ein Beispiel für die Währungsformatierung. Sie werden feststellen, dass das Konzept das gleiche wie im obigen Beispiel ist. Zuerst müssen wir installierennumeral Bibliothek aus dem command prompt.
C:\Users\username\Desktop\aureliaApp>jspm install numeral
Der Konverter legt das Währungsformat fest.
converters.js
import numeral from 'numeral';
export class CurrencyFormatValueConverter {
toView(value) {
return numeral(value).format('($0,0.00)');
}
}
Das Ansichtsmodell generiert nur eine Zufallszahl. Wir werden dies als Währungswert verwenden und ihn jede Sekunde aktualisieren.
app.js.
export class App {
constructor() {
this.update();
setInterval(() => this.update(), 1000);
}
update() {
this.myCurrency = Math.random() * 1000;
}
}
Unsere Ansicht zeigt die zufällig generierte Zahl, die als Währung transformiert wurde.
app.html
<template>
<require from = "./converters"></require>
<h3>${myCurrency | currencyFormat}</h3>
</template>