Aurelia-コンバーター

Aureliaアプリでいくつかの値を変換する必要がある場合は、 converters 手動で値を目的の形式に変換する代わりに。

日付の変換

デフォルトの日付値を特定の形式に変換する場合は、次を使用できます。 momentJS図書館。これは、日付を操作するために使用される小さなライブラリです。

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

新しいファイルを作成しましょう converters.js。このファイルを使用して、コンバーター固有のコードを追加します。次のコマンドを使用するか、ファイルを手動で作成します。

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

convert.js

このファイル内で、インポートします moment ライブラリとセット DateFormatValueConverter追加のデータなしで月、日、年の値のみを返します。注意すべき重要なことは、Aureliaはで終わるすべてのクラスを認識できるということですValueConverter。これが私たちのクラス名がDateFormatValueConverter。このクラスはとして登録されますdateFormat 後でビュー内で使用できます。

Converters.js

import moment from 'moment';

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

app.js、現在の日付のみを使用します。これが私たちのビューモデルになります。

app.js

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

すでに議論しました requirecustom-elements章。パイプ記号| コンバーターを適用するために使用されます。使用しているのはdateFormat これがAureliaが登録している方法だからです DateFormatValueConverter

app.html

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

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

通貨を変換する

これは通貨フォーマットの例です。概念は上記の例と同じであることがわかります。まず、インストールする必要がありますnumeral からのライブラリ command prompt

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

コンバーターは通貨フォーマットを設定します。

Converters.js

import numeral from 'numeral';

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

ビューモデルは乱数を生成するだけです。これを通貨値として使用し、毎秒更新します。

app.js

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

ビューには、ランダムに生成された数値が通貨として変換されて表示されます。

app.html

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

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