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

4 سال پیش

امتیاز دهید post

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

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

اجزا (component) اصلی ترین عناصر سازنده چارچوب اورلیا هستند. در این ذدرس، نحوه ایجاد م .لفه های ساده را یاد خواهید گرفت.

اجزا ساده

همانطور که قبلاً در فصل قبل بحث شد ، هر جز component شامل view-model است که با جاوا اسکریپت نوشته شده است ، و View با HTML نوشته شده است. می توانید تعریف view-model زیر را مشاهده کنید. این یک مثال ES6 است اما شما همچنین می توانید از TypeScript استفاده کنید.

app.js

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

export class MyComponent {

header = "This is Header";

content = "This is content";

}

همانطور که در مثال زیر نشان داده شده است ، می توانیم مقادیر خود را به نما متصل کنیم. نحو {header}$ مقدار هدر تعریف شده را از MyComponent متصل می کند. همین مفهوم برای محتوا به کار رفته است.

app.html

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

<h1>${header}</h1>

<p>${content}</p>

</template>

کد فوق خروجی زیر را ایجاد می کند.

Aurelia Components Simple

توابع اجزا

اگر می خواهید هدر و فوتر را با کلیک کاربر بر روی دکمه به روز کنید ، می توانید از مثال زیر استفاده کنید. این بار ما در حال تعریف هدر و فوتر در داخل سازنده کلاس EC6 هستیم.

app.js

export class App{  
   constructor() {
      this.header = 'This is Header';
      this.content = 'This is content';
   }
   updateContent() {
      this.header = 'This is NEW header...'
      this.content = 'This is NEW content...';
   }
}

export class App{

constructor() {

this.header = 'This is Header';

this.content = 'This is content';

}

updateContent() {

this.header = 'This is NEW header...'

this.content = 'This is NEW content...';

}

برای اتصال تابع ()updateContent با دکمه می توانیم ()click.delegate را اضافه کنیم.

app.html

&lt;template&gt;
   &lt;h1&gt;${header}&lt;/h1&gt;
   &lt;p&gt;${content}&lt;/p&gt;
   &lt;button click.delegate = "updateContent()"&gt;Update Content&lt;/button&gt;
&lt;/template&gt;

<h1>${header}</h1>

<p>${content}</p>

<button click.delegate = "updateContent()">Update Content</button>

</template>

با کلیک بر روی دکمه ، عنوان و محتوای آن به روز می شود.

Aurelia Components Method

منبع.

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

امتیاز دهید post

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

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

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

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

اجزا ساده

app.js

app.html

توابع اجزا

app.js

app.html

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

دیدگاه شما

بدون دیدگاه

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

اجزا ساده

app.js

app.html

توابع اجزا

app.js

app.html

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

دیدگاه شما

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

بدون دیدگاه