Aurelia - Converters أوريليا - محولات

 Aurelia - Converters أوريليا - محولات

إذا كنت بحاجة إلى تحويل بعض القيم في تطبيق Aurelia ، فيمكنك استخدام المحولات بدلاً من تحويل القيم يدويًا إلى التنسيق المطلوب.

تاريخ التحويل

عندما نريد تحويل قيمة التاريخ الافتراضية إلى تنسيق معين ، يمكننا استخدام مكتبة MomentJS . هذه مكتبة صغيرة تستخدم لمعالجة التواريخ.

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

لنقم بإنشاء ملف converters.js جديدًا . سنستخدم هذا الملف لإضافة رمز خاص بالمحول. استخدم الأمر التالي أو أنشئ الملف يدويًا.

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

Converter.js

داخل هذا الملف ، سنقوم باستيراد مكتبة اللحظات وتعيين DateFormatValueConverter لإرجاع قيم الشهر واليوم والسنة فقط بدون بيانات إضافية. الشيء المهم الذي يجب ملاحظته هو أن Aurelia يمكنها التعرف على أي فئة تنتهي بـ ValueConverter . هذا هو السبب في أن اسم الفصل لدينا هو DateFormatValueConverter . سيتم تسجيل هذه الفئة على أنها dateFormat ويمكننا استخدامها لاحقًا في العرض الداخلي.

المحولات. 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();
   }
}

ناقشنا بالفعل طلب في فصل العناصر المخصصة . رمز الأنبوب | يستخدم لتطبيق المحول. نحن نستخدم dateFormat فقط لأن هذه هي الطريقة التي تسجل بها Aurelia DateFormatValueConverter .

app.html

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

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

تحويل العملة

هذا مثال على تنسيق العملة. ستلاحظ أن المفهوم هو نفسه كما في المثال أعلاه. أولاً ، نحتاج إلى تثبيت مكتبة الأرقام من موجه الأوامر .

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

سيقوم المحول بتعيين تنسيق العملة.

المحولات. 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>