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

4 سال پیش

امتیاز دهید post

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

در این درس از مجموعه آموزش برنامه نویسی سایت سورس باران، به آموزش عناصر سفارشی در برنامه نویسی اورلیا خواهیم پرداخت.
اورلیا راهی برای افزودن پویا مولفه ها ارائه می دهد. بدون نیاز به درج چندین بار HTML ، می توانید از یک مولفه واحد در قسمتهای مختلف برنامه خود استفاده مجدد کنید. در این درس، شما یاد خواهید گرفت که چگونه به این مهم دست پیدا کنید.

مرحله 1 – کامپوننت سفارشی ایجاد کنید

بیایید پوشه components جدید را در پوشه src ایجاد کنیم.

C:\Users\username\Desktop\aureliaApp\src&gt;mkdir components

1	C:\Users\username\Desktop\aureliaApp\src>mkdir components

در داخل این فهرست ، custom-component.html ایجاد خواهیم کرد. این مولفه بعداً در صفحه HTML درج خواهد شد.

custom-component.html

&lt;template&gt;
   &lt;p&gt;This is some text from dynamic component...&lt;/p&gt;
&lt;/template&gt;

<p>This is some text from dynamic component...</p>

</template>

مرحله 2 – مولفه اصلی را ایجاد کنید

ما یک مولفه ساده در app.js. ایجاد خواهیم کرد. برای ارائه متن سرصفحه و صفحه در صفحه استفاده می شود.

app.js

export class MyComponent {
   header = "This is Header";
   content = "This is content";
}

export class MyComponent {

header = "This is Header";

content = "This is content";

}

مرحله 3 – مولفه سفارشی را اضافه کنید

در داخل فایل app.html خود ما نیاز داریم که custom-component.html بتوانیم آن را به صورت پویا وارد کنیم. هنگامی که این کار را انجام دادیم پ، می توانیم یک عنصر سفارشی را به عنصر جدید اضافه کنیم.

app.html

&lt;template&gt;
   &lt;require from = "./components/custom-component.html"&gt;&lt;/require&gt;

   &lt;h1&gt;${header}&lt;/h1&gt;
   &lt;p&gt;${content}&lt;/p&gt;
   &lt;custom-component&gt;&lt;/custom-component&gt;
&lt;/template&gt;

<h1>${header}</h1>

<p>${content}</p>

<custom-component></custom-component>

</template>

در زیر خروجی است. متن هدر و فوتر از myComponent داخل app.js ارائه شده است. متن اضافی از custom-component.js ارائه شده است

Aurelia Custom Elements Example

منبع.

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

امتیاز دهید post

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

نویسنده مطلب saber

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

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

مرحله 1 – کامپوننت سفارشی ایجاد کنید

custom-component.html

مرحله 2 – مولفه اصلی را ایجاد کنید

app.js

مرحله 3 – مولفه سفارشی را اضافه کنید

app.html

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

دیدگاه شما

بدون دیدگاه

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

مرحله 1 – کامپوننت سفارشی ایجاد کنید

custom-component.html

مرحله 2 – مولفه اصلی را ایجاد کنید

app.js

مرحله 3 – مولفه سفارشی را اضافه کنید

app.html

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

دیدگاه شما

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

بدون دیدگاه