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();
}
}
すでに議論しました require に custom-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>