Aurelia - Components أوريليا - مكونات

 Aurelia - Components أوريليا - مكونات

المكونات هي اللبنات الأساسية لإطار عمل Aurelia. في هذا الفصل ، سوف تتعلم كيفية إنشاء مكونات بسيطة.

مكون بسيط

كما سبق أن ناقشنا في الفصل السابق ، يحتوي كل مكون على نموذج عرض مكتوب بلغة جافا سكريبت ، وعرض مكتوب بلغة HTML . يمكنك رؤية تعريف نموذج العرض التالي . إنه مثال ES6 ولكن يمكنك أيضًا استخدام TypeScript .

app.js

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

يمكننا ربط قيمنا بطريقة العرض كما هو موضح في المثال التالي. ستعمل صيغة $ {header} على ربط قيمة الرأس المحددة من MyComponent . يتم تطبيق نفس المفهوم على المحتوى .

app.html

<template>
   <h1>${header}</h1>
   <p>${content}</p>
</template>

سوف ينتج الكود أعلاه الناتج التالي.

وظائف المكون

إذا كنت تريد تحديث الرأس والتذييل عندما ينقر المستخدم على الزر ، يمكنك استخدام المثال التالي. هذه المرة نحن تعريف رأس و تذييل داخل 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...';
   }
}

يمكننا إضافة click.delegate () لتوصيل وظيفة updateContent () بالزر. المزيد عن هذا في أحد الفصول اللاحقة.

app.html

<template>
   <h1>${header}</h1>
   <p>${content}</p>
   <button click.delegate = "updateContent()">Update Content</button>
</template>

عند النقر فوق الزر ، سيتم تحديث العنوان والمحتوى.