Aurelia-변환기
Aurelia 앱에서 일부 값을 변환해야하는 경우 다음을 사용할 수 있습니다. converters 값을 원하는 형식으로 수동으로 변환하는 대신.
날짜 변환
기본 날짜 값을 특정 형식으로 변환하려면 다음을 사용할 수 있습니다. momentJS도서관. 이것은 날짜를 조작하는 데 사용되는 작은 라이브러리입니다.
C:\Users\username\Desktop\aureliaApp>jspm install moment
새 파일을 만들어 보겠습니다. converters.js. 이 파일을 사용하여 변환기 특정 코드를 추가합니다. 다음 명령을 사용하거나 파일을 수동으로 만듭니다.
C:\Users\username\Desktop\aureliaApp>touch converters.js
converter.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>