آموزش مبدل ها در برنامه نویسی اورلیا

3 سال پیش

آموزش مبدل ها در برنامه نویسی اورلیا

در این درس از مجموعه آموزش برنامه نویسی سایت سورس باران، به آموزش مبدل ها در برنامه نویسی اورلیا خواهیم پرداخت.

در صورت نیاز به تبدیل برخی مقادیر در برنامه اورلیا، می توانید به جای تبدیل دستی مقادیر به قالب دلخواه، از مبدل ها استفاده کنید.

تبدیل تاریخ

وقتی می خواهیم مقدار تاریخ پیش فرض را به برخی از قالب های خاص تبدیل کنیم ، می توانیم از کتابخانه momentJS استفاده کنیم. این کتابخانه کوچکی است که برای دستکاری خرما استفاده می شود.

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

بیایید یک فایل جدید converters.js ایجاد کنیم. ما از این فایل برای افزودن کد خاص مبدل استفاده خواهیم کرد. از دستور زیر استفاده کنید یا پرونده را به صورت دستی ایجاد کنید.

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

converter.js

در داخل این پرونده ، ما کتابخانه لحظه ای را وارد کرده و DateFormatValueConverter را تنظیم می کنیم تا فقط داده های ماه ، روز و سال را بدون داده های اضافی برگرداند. نکته مهمی که باید به آن توجه کنید این است که اورلیا می تواند هر کلاسی را که به ValueConverter ختم شود ، تشخیص دهد. به همین دلیل نام کلاس ما DateFormatValueConverter است. این کلاس به عنوان dateFormat ثبت می شود و بعداً می توانیم از آن در نمای داخلی استفاده کنیم.

converter.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 استفاده می کنیم زیرا اورلیا به این ترتیب DateFormatValueConverter را ثبت می کند.

app.html

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

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

Aurelia Converters Date

تبدیل ارز

این نمونه ای از قالب بندی ارز است. مشاهده خواهید کرد که این مفهوم همان مثال فوق است. اول ما باید کتابخانه اعداد را از خط فرمان نصب کنیم.

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

مبدل قالب ارز را تنظیم می کند.

converter.js

import numeral from 'numeral';

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

View-model فقط یک عدد تصادفی ایجاد می کند. ما از این به عنوان مقدار ارز استفاده خواهیم کرد و هر ثانیه آن را به روز می کنیم.

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>

Aurelia Converters Currency

منبع.

لیست جلسات قبل آموزش برنامه نویسی اورلیا

برچسب ها : آموزش اورلیا آموزش برنامه نویسی موبایل

نویسنده مطلب erfan molaei

آموزش مبدل ها در برنامه نویسی اورلیا

آموزش مبدل ها در برنامه نویسی اورلیا

تبدیل تاریخ

converter.js

converter.js

app.js

app.html

تبدیل ارز

converter.js

app.js

app.html

لیست جلسات قبل آموزش برنامه نویسی اورلیا

دیدگاه شما

بدون دیدگاه

آموزش مبدل ها در برنامه نویسی اورلیا

تبدیل تاریخ

converter.js

converter.js

app.js

app.html

تبدیل ارز

converter.js

app.js

app.html

لیست جلسات قبل آموزش برنامه نویسی اورلیا

دیدگاه شما

برای صرف‌نظر کردن از پاسخ‌گویی اینجا را کلیک نمایید.

بدون دیدگاه