Aurelia - Convertisseurs

Si vous avez besoin de convertir certaines valeurs dans l'application Aurelia, vous pouvez utiliser converters au lieu de convertir manuellement les valeurs dans un format souhaité.

Date de conversion

Lorsque nous voulons convertir la valeur de date par défaut dans un format spécifique, nous pouvons utiliser momentJSbibliothèque. Il s'agit d'une petite bibliothèque utilisée pour manipuler les dates.

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

Créons un nouveau fichier converters.js. Nous utiliserons ce fichier pour ajouter du code spécifique au convertisseur. Utilisez la commande suivante ou créez le fichier manuellement.

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

convertisseur.js

Dans ce fichier, nous importerons moment bibliothèque et ensemble DateFormatValueConverterpour renvoyer uniquement les valeurs du mois, du jour et de l'année sans données supplémentaires. Il est important de noter qu'Aurelia peut reconnaître n'importe quel cours qui se termine parValueConverter. C'est pourquoi notre nom de classe estDateFormatValueConverter. Cette classe sera enregistrée commedateFormat et nous pouvons plus tard l'utiliser vue de l'intérieur.

converters.js

import moment from 'moment';

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

Dans app.js, nous utiliserons simplement la date actuelle. Ce sera notre modèle de vue.

app.js

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

Nous avons déjà discuté require dans custom-elementschapitre. Le symbole de la pipe | est utilisé pour appliquer le convertisseur. Nous n'utilisons quedateFormat puisque c'est ainsi qu'Aurelia s'enregistre DateFormatValueConverter.

app.html

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

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

Convertir la devise

Ceci est un exemple de formatage de devise. Vous remarquerez que le concept est le même que dans l'exemple ci-dessus. Tout d'abord, nous devons installernumeral bibliothèque de la command prompt.

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

Le convertisseur définira le format de la devise.

converters.js

import numeral from 'numeral';

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

View-model générera simplement un nombre aléatoire. Nous l'utiliserons comme valeur de devise et la mettrons à jour toutes les secondes.

app.js

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

Notre vue montrera le nombre généré aléatoirement transformé en devise.

app.html

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

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