Aurelia এর কম্পোনেন্টস

Aurelia একটি কম্পোনেন্ট-ভিত্তিক ফ্রেমওয়ার্ক, যার মাধ্যমে আপনি UI উপাদানগুলোকে ছোট ছোট পুনরায় ব্যবহারযোগ্য টুকরোতে ভেঙে ফেলতে পারেন। প্রতিটি কম্পোনেন্ট একটি HTML টেমপ্লেট, একটি ভিউমডেল এবং একটি স্টাইলশিট ধারণ করে। Aurelia এর কম্পোনেন্টস ব্যবহারের মাধ্যমে আপনি কার্যকরী, মডুলার এবং স্কেলেবল অ্যাপ্লিকেশন তৈরি করতে পারেন।

কম্পোনেন্টের মৌলিক উপাদানসমূহ

Aurelia কম্পোনেন্ট সাধারণত তিনটি মৌলিক অংশে ভাগ করা হয়:

1. HTML টেমপ্লেট (View)
   এটি কম্পোনেন্টের UI অংশ। HTML কোডের মাধ্যমে এটি ইউজার ইন্টারফেসের স্ট্রাকচার তৈরি করে এবং ডেটা বাইন্ডিংয়ের মাধ্যমে ডেটা প্রদর্শন করে।
2. JavaScript/TypeScript (ViewModel)
   এটি কম্পোনেন্টের লজিক বা আচরণ সংজ্ঞায়িত করে। ViewModel হল আপনার কম্পোনেন্টের ডেটা এবং মেথড যা UI (View) এর সাথে বাইন্ড করা থাকে।
3. CSS (Styling)
   এটি কম্পোনেন্টের স্টাইল সংজ্ঞায়িত করে। আপনি এখানে কম্পোনেন্টের দৃশ্যমানতা এবং নকশা নিয়ন্ত্রণ করতে পারেন।

কম্পোনেন্ট তৈরি করার প্রক্রিয়া

১. কম্পোনেন্টের জন্য HTML এবং JavaScript তৈরি করা

Aurelia কম্পোনেন্ট তৈরি করতে আপনাকে একটি .html এবং .js (বা .ts) ফাইল তৈরি করতে হবে। উদাহরণস্বরূপ:

my-component.html:

<template>
  <h2>${message}</h2>
  <button click.delegate="changeMessage()">Click me</button>
</template>

my-component.js:

export class MyComponent {
  message = "Hello, Aurelia!";
  
  changeMessage() {
    this.message = "You clicked the button!";
  }
}

২. কম্পোনেন্ট ব্যবহার করা

একবার কম্পোনেন্ট তৈরি হয়ে গেলে, এটি অন্য কোথাও ব্যবহার করা যায়। যেমন, app.html ফাইলে এই কম্পোনেন্টটি ব্যবহার করা যাবে:

app.html:

<template>
  <require from="./my-component"></require>

  <my-component></my-component>
</template>

এখানে <require> ট্যাগটি কম্পোনেন্টটি import করতে ব্যবহৃত হয়, এবং <my-component></my-component> ট্যাগটি সেই কম্পোনেন্টকে ইউজার ইন্টারফেসে ব্যবহার করে।

Aurelia কম্পোনেন্টের অন্যান্য বৈশিষ্ট্য

১. কম্পোনেন্টের লাইফসাইকেল হুকস

Aurelia কম্পোনেন্টে কিছু লাইফসাইকেল হুকস থাকে, যা আপনাকে কম্পোনেন্টের বিভিন্ন ধাপে কোড রান করার সুযোগ দেয়। কিছু সাধারণ লাইফসাইকেল হুকস:

• constructor(): কম্পোনেন্টের তৈরি হওয়ার পর প্রথমে কল হয়।
• attached(): কম্পোনেন্ট DOM এ যুক্ত হওয়ার পরে কল হয়।
• detached(): কম্পোনেন্ট DOM থেকে সরানোর পরে কল হয়।
• binding(): ডেটা বাইন্ডিং সম্পন্ন হওয়ার আগে কল হয়।
• unbind(): ডেটা বাইন্ডিং শেষ হওয়ার পরে কল হয়।

২. কম্পোনেন্টের ডেটা বাইন্ডিং

Aurelia ডেটা বাইন্ডিংয়ের মাধ্যমে সহজেই UI এবং ViewModel এর মধ্যে যোগাযোগ তৈরি করতে সাহায্য করে। কিছু সাধারণ বাইন্ডিং:

• টেক্সট বাইন্ডিং: একটি ভেরিয়েবলের মানকে HTML ট্যাগের মধ্যে ইনজেক্ট করা। উদাহরণ: <h1>${message}</h1>
• এট্রিবিউট বাইন্ডিং: HTML এট্রিবিউটের মান সেট করা। উদাহরণ: <button disabled.bind="isDisabled">Click me</button>
• ইভেন্ট বাইন্ডিং: ইউজার ইন্টারঅ্যাকশনের মাধ্যমে মেথড কল করা। উদাহরণ: <button click.delegate="changeMessage()">Click me</button>

৩. কম্পোনেন্টের কনফিগারেশন

Aurelia কম্পোনেন্টে কনফিগারেশনও করা যায়, যেমন bindable প্রপার্টি ব্যবহার করে প্যারামিটার পাস করা:

export class MyComponent {
  @bindable message = "Hello!";
}

এখন, এই কম্পোনেন্ট ব্যবহার করার সময় আপনি message প্রপার্টিটি বাইন্ড করতে পারবেন:

<my-component message="Welcome to Aurelia!"></my-component>

৪. ইনক্লুডিং স্টাইল

Aurelia কম্পোনেন্টে আপনি সিএসএস ফাইলও যোগ করতে পারেন, যার মাধ্যমে আপনি কেবল ঐ কম্পোনেন্টের জন্য স্টাইল কাস্টমাইজ করতে পারবেন।

<template>
  <h2>${message}</h2>
  <button click.delegate="changeMessage()">Click me</button>
</template>

<style>
  h2 {
    color: blue;
  }
  button {
    background-color: lightblue;
  }
</style>

উপসংহার

Aurelia এর কম্পোনেন্টস আপনাকে অ্যাপ্লিকেশনকে ছোট ছোট এবং পুনঃব্যবহারযোগ্য টুকরোতে ভাগ করতে সাহায্য করে। কম্পোনেন্ট তৈরি করার মাধ্যমে আপনি UI, ডেটা এবং লজিককে আলাদা রাখতে পারবেন, যা কোডের রক্ষণাবেক্ষণ এবং স্কেলেবল ডিজাইন সহজ করে তোলে। Aurelia এর শক্তিশালী ডেটা বাইন্ডিং, লাইফসাইকেল হুকস এবং সিএসএস স্টাইলিং সমর্থন দিয়ে কম্পোনেন্টগুলি আরও শক্তিশালী এবং ইন্টারেক্টিভ হয়ে ওঠে।

Aurelia-তে কম্পোনেন্ট তৈরি করা একটি সহজ এবং কার্যকর প্রক্রিয়া। কম্পোনেন্ট মূলত HTML, CSS এবং JavaScript/TypeScript এর সংমিশ্রণ, যা আপনার অ্যাপ্লিকেশনের UI এবং ব্যবসায়িক লজিক (business logic) আলাদা রাখে। কম্পোনেন্ট ব্যবহার করে আপনি অ্যাপ্লিকেশনকে ছোট ছোট অংশে ভাগ করতে পারেন, যা কোড পুনরায় ব্যবহারযোগ্য, রক্ষণাবেক্ষণযোগ্য এবং স্কেলেবল করে তোলে।

এখানে আমরা দেখব কিভাবে Aurelia-তে একটি নতুন কম্পোনেন্ট তৈরি করা যায়।

১. Aurelia কম্পোনেন্টের গঠন

Aurelia কম্পোনেন্ট সাধারণত তিনটি অংশ নিয়ে গঠিত:

• HTML (View): UI তৈরি করতে ব্যবহৃত ফাইল।
• CSS/SCSS (Optional): স্টাইল শীট ফাইল, UI কাস্টমাইজ করতে।
• JavaScript/TypeScript (ViewModel): কম্পোনেন্টের লজিক (business logic) ধারণ করা ফাইল।

২. Aurelia CLI দিয়ে নতুন কম্পোনেন্ট তৈরি করা

Aurelia CLI ব্যবহারের মাধ্যমে কম্পোনেন্ট তৈরি করা খুবই সহজ। আপনি CLI কমান্ড ব্যবহার করে একটি নতুন কম্পোনেন্ট তৈরি করতে পারেন।

কম্পোনেন্ট তৈরি করার জন্য:

1. Aurelia CLI ব্যবহার করুন:

   • কম্পোনেন্ট তৈরি করতে CLI কমান্ড ব্যবহার করুন:

     au generate component component-name
     

   এখানে component-name এর জায়গায় আপনার পছন্দসই কম্পোনেন্টের নাম দিন (যেমন, my-button বা user-profile ইত্যাদি)।

2. এটি একটি নতুন ফোল্ডার তৈরি করবে যেখানে থাকবে কম্পোনেন্টের জন্য প্রয়োজনীয় ফাইলগুলি, যেমন:
   • component-name.html: HTML টেমপ্লেট ফাইল।
   • component-name.js: ViewModel (business logic) ফাইল।
   • component-name.css: কম্পোনেন্টের স্টাইল শীট ফাইল (যদি প্রয়োজন হয়)।

৩. কম্পোনেন্টের উদাহরণ

উদাহরণ: একটি সাধারণ Greeting কম্পোনেন্ট তৈরি করা

1. HTML (View) - greeting.html

   <template>
     <h2>Hello, <span>${name}</span>!</h2>
     <button click.delegate="changeName()">Change Name</button>
   </template>
   

   এখানে, name ভ্যারিয়েবলকে span ট্যাগে বাইন্ড করা হয়েছে, এবং একটি বাটন তৈরি করা হয়েছে যা ক্লিক করার পর নাম পরিবর্তন করবে।

2. JavaScript (ViewModel) - greeting.js

   export class Greeting {
     name = 'John Doe';  // ডিফল্ট নাম
   
     changeName() {
       this.name = 'Jane Doe';  // বাটনে ক্লিক করলে নাম পরিবর্তন হবে
     }
   }
   

   এখানে, name প্রপার্টি দিয়ে ডেটা বাইন্ডিং করা হয়েছে এবং changeName ফাংশনটি বাটন ক্লিক ইভেন্টের মাধ্যমে নাম পরিবর্তন করবে।

3. CSS (Optional) - greeting.css

   h2 {
     color: blue;
   }
   
   button {
     margin-top: 10px;
   }
   

   এখানে, কম্পোনেন্টের জন্য কিছু স্টাইল দেওয়া হয়েছে।

৪. কম্পোনেন্ট ব্যবহার করা

কম্পোনেন্ট তৈরি করার পর, আপনি এটি আপনার মূল অ্যাপ্লিকেশন বা অন্য কম্পোনেন্টে ব্যবহার করতে পারেন।

উদাহরণ:

1. app.html - প্রধান অ্যাপ্লিকেশন ফাইল

   <template>
     <require from="./greeting"></require>  <!-- কম্পোনেন্ট আমদানি -->
     
     <greeting></greeting>  <!-- কম্পোনেন্ট ব্যবহার -->
   </template>
   

   এখানে, <require> ট্যাগ ব্যবহার করে greeting কম্পোনেন্টকে অ্যাপ্লিকেশনে অন্তর্ভুক্ত করা হয়েছে, এবং পরে <greeting></greeting> ট্যাগ দিয়ে কম্পোনেন্টটি UI-তে যোগ করা হয়েছে।

৫. কম্পোনেন্টে প্রপার্টি ও ইভেন্টস

Aurelia কম্পোনেন্টে প্রপার্টি এবং ইভেন্টস সহজেই ব্যবহৃত হতে পারে। কম্পোনেন্টে ডেটা বাইন্ডিং এবং ইভেন্ট হ্যান্ডলিং করতে আপনি নিম্নলিখিত পদ্ধতি অনুসরণ করতে পারেন:

১. প্রপার্টি বাইন্ডিং:

ডেটা বাইন্ডিং ব্যবহার করে, আপনি কম্পোনেন্টের ভিতরের প্রপার্টিগুলিকে UI-তে বাইন্ড করতে পারেন।

<template>
  <h3>${message}</h3>  <!-- message প্রপার্টি বাইন্ডিং -->
</template>

export class MyComponent {
  message = 'Welcome to Aurelia!';
}

২. ইভেন্ট হ্যান্ডলিং:

Aurelia কম্পোনেন্টে ইভেন্ট হ্যান্ডলিং করতে click.delegate বা অন্যান্য ডিরেকটিভ ব্যবহার করা হয়।

<template>
  <button click.delegate="changeMessage()">Change Message</button>
</template>

export class MyComponent {
  message = 'Hello, World!';

  changeMessage() {
    this.message = 'Message Changed!';
  }
}

৬. কম্পোনেন্টের রিইউজিবিলিটি

Aurelia কম্পোনেন্টে আপনি সহজেই কোড রিইউজ করতে পারেন। যখন আপনি একটি কম্পোনেন্ট তৈরি করেন, তখন সেটি অন্যান্য পেজ বা ভিউতে ব্যবহার করা সম্ভব হয়, যা অ্যাপ্লিকেশনটি মডুলার এবং পুনঃব্যবহারযোগ্য করে তোলে।

উপসংহার

Aurelia-তে কম্পোনেন্ট তৈরি করা খুবই সহজ এবং পরিষ্কার। কম্পোনেন্ট ব্যবহার করে আপনি অ্যাপ্লিকেশনকে ছোট ছোট অংশে ভাগ করতে পারবেন, যা ডেভেলপমেন্ট প্রক্রিয়াকে আরও দ্রুত এবং স্কেলেবল করে তোলে। Aurelia কম্পোনেন্টের মাধ্যমে UI এবং ব্যবসায়িক লজিক (business logic) আলাদা রাখা সম্ভব হয়, যা কোড রক্ষণাবেক্ষণ ও পুনঃব্যবহারযোগ্যতা নিশ্চিত করে।

Aurelia ফ্রেমওয়ার্কে কম্পোনেন্ট লাইফসাইকেল মেথডগুলি এমন একটি সিরিজের মেথড যা একটি কম্পোনেন্ট তৈরি, আপডেট এবং ধ্বংস করার সময় একে কার্যকরী করে। এই মেথডগুলি ডেভেলপারদের জন্য একটি সুসংগঠিত এবং কাঠামোবদ্ধ উপায় প্রদান করে যা কম্পোনেন্টের সঠিক কার্যকারিতা নিশ্চিত করে এবং কম্পোনেন্টের অবস্থার প্রতি প্রতিক্রিয়া দেখায়।

নিচে Aurelia কম্পোনেন্ট লাইফসাইকেল মেথডগুলি বিস্তারিতভাবে বর্ণনা করা হলো:

১. constructor()

• ব্যাখ্যা: এই মেথডটি কম্পোনেন্ট তৈরি হওয়ার সময় প্রথমে কল হয়। এটি কম্পোনেন্টের ডিপেনডেন্সি ইনজেকশন (DI) এর জন্য ব্যবহৃত হয়।
• কখন কল হয়: যখন কম্পোনেন্টের নতুন ইনস্ট্যান্স তৈরি হয়।

• উদাহরণ:

  export class MyComponent {
    constructor() {
      console.log('Component Constructor');
    }
  }
  

২. bind()

• ব্যাখ্যা: bind() মেথডটি কম্পোনেন্টের প্রপার্টি এবং ভিউয়ের মধ্যে ডেটা বাইন্ডিং শুরু করার জন্য কল হয়। এটি ডেটা বাইন্ডিং এবং ভিউ-ভিউমডেল সম্পর্ক প্রতিষ্ঠা করে।
• কখন কল হয়: কম্পোনেন্টের ইনস্ট্যান্স তৈরি হওয়ার পর এবং ডেটা বাইন্ডিং শুরু হওয়ার সময়।

• উদাহরণ:

  export class MyComponent {
    bind() {
      console.log('Component Binding');
    }
  }
  

৩. attached()

• ব্যাখ্যা: attached() মেথডটি কম্পোনেন্টটি DOM-এ যোগ করার পরে কল হয়। এই সময় আপনার কম্পোনেন্ট পুরোপুরি রেন্ডার করা হয়ে থাকে এবং আপনি DOM এর সাথে কাজ করতে পারবেন।
• কখন কল হয়: যখন কম্পোনেন্ট DOM এ অ্যাড করা হয়।

• উদাহরণ:

  export class MyComponent {
    attached() {
      console.log('Component Attached to the DOM');
    }
  }
  

৪. detached()

• ব্যাখ্যা: detached() মেথডটি কম্পোনেন্টটি DOM থেকে সরানোর সময় কল হয়। এটি মূলত ক্লিনআপ কার্যক্রম যেমন, ইভেন্ট লিসেনার বা অন্যান্য রিসোর্স ফ্রি করার জন্য ব্যবহৃত হয়।
• কখন কল হয়: যখন কম্পোনেন্ট DOM থেকে সরানো হয়।

• উদাহরণ:

  export class MyComponent {
    detached() {
      console.log('Component Detached from the DOM');
    }
  }
  

৫. unbind()

• ব্যাখ্যা: unbind() মেথডটি ডেটা বাইন্ডিং শেষ হওয়ার পরে কল হয়। এটি বাইন্ডিং ইভেন্টের জন্য ক্লিনআপ কার্যক্রম হিসেবে কাজ করতে পারে, যেমন মেমরি মুক্ত করা।
• কখন কল হয়: যখন ডেটা বাইন্ডিং শেষ হয় বা কম্পোনেন্ট ধ্বংস হয়।

• উদাহরণ:

  export class MyComponent {
    unbind() {
      console.log('Component Unbind');
    }
  }
  

৬. activate() (এটা Route Guards এর সাথে সম্পর্কিত)

• ব্যাখ্যা: activate() মেথডটি রাউটিং এর সময় ব্যবহার করা হয় এবং এটি রাউটের জন্য ডেটা বা প্রাথমিক সেটআপ করতে ব্যবহৃত হয়। যদি রাউটার একটি নতুন কম্পোনেন্টের জন্য রাউট থাকে তবে এই মেথডটি কল হবে।
• কখন কল হয়: যখন রাউট পরিবর্তন হয় এবং নতুন কম্পোনেন্ট লোড হয়।

• উদাহরণ:

  export class MyComponent {
    activate(params) {
      console.log('Component Activated');
    }
  }
  

৭. deactivate() (এটা Route Guards এর সাথে সম্পর্কিত)

• ব্যাখ্যা: deactivate() মেথডটি কম্পোনেন্টটি রাউট থেকে সরানোর আগে কল হয়। এটি ডেটা বা রিসোর্স ক্লিনআপ করতে ব্যবহৃত হয়।
• কখন কল হয়: যখন কম্পোনেন্ট রাউট থেকে সরানো হয়।

• উদাহরণ:

  export class MyComponent {
    deactivate() {
      console.log('Component Deactivated');
    }
  }
  

৮. canActivate() (Route Guard মেথড)

• ব্যাখ্যা: canActivate() মেথডটি ব্যবহারকারী যখন কোনো রাউট খুলবে, তখন এই মেথডটি চেক করবে যে সেই রাউটে প্রবেশ করা যাবে কিনা। এটি সাধারণত রাউট প্রটেকশন বা অথেনটিকেশন চেক করার জন্য ব্যবহার করা হয়।
• কখন কল হয়: যখন রাউট শুরু হয় এবং রাউট পরিবর্তন করতে পারবে কিনা তা চেক করতে।

• উদাহরণ:

  export class MyComponent {
    canActivate() {
      console.log('Can Activate this Route');
      return true; // বা false
    }
  }
  

৯. canDeactivate() (Route Guard মেথড)

• ব্যাখ্যা: canDeactivate() মেথডটি তখন কল হয় যখন আপনি রাউট পরিবর্তন করবেন এবং এটি আপনাকে জানায় যে, আপনি কি রাউটটি ত্যাগ করতে চান। এটি সাধারণত অব্যবহৃত ডেটা বা ক্লিনআপের জন্য ব্যবহৃত হয়।
• কখন কল হয়: যখন কম্পোনেন্টটি রাউট থেকে সরানো হবে।

• উদাহরণ:

  export class MyComponent {
    canDeactivate() {
      console.log('Can Deactivate this Route');
      return true; // বা false
    }
  }
  

উপসংহার

Aurelia এর কম্পোনেন্ট লাইফসাইকেল মেথডস আপনাকে কম্পোনেন্টের প্রতিটি পর্যায়ে কাস্টম কার্যক্রম পরিচালনা করার সুযোগ দেয়। এগুলোর মাধ্যমে আপনি ডেটা বাইন্ডিং, DOM অপারেশন, ক্লিনআপ এবং রাউটিং এর কাজগুলো খুব সহজে নিয়ন্ত্রণ করতে পারবেন। লাইফসাইকেল মেথডগুলো ব্যবহার করে আপনার অ্যাপ্লিকেশনকে আরও কার্যকর এবং মডুলার করা সম্ভব।

Aurelia ফ্রেমওয়ার্কের মূল ধারণা হল কম্পোনেন্ট-ভিত্তিক আর্কিটেকচার। এটি আপনাকে অ্যাপ্লিকেশনকে ছোট ছোট, পুনঃব্যবহারযোগ্য এবং আলাদা আলাদা কম্পোনেন্টে বিভক্ত করতে সাহায্য করে। এর মাধ্যমে আপনার কোড আরও মডুলার, পরিষ্কার এবং স্কেলেবল হয়ে ওঠে।

এছাড়া, Aurelia Templates হল HTML টেমপ্লেটস, যা ডেটা বাইন্ডিং এবং UI কম্পোনেন্টের কার্যক্রমের সাথে ইন্টিগ্রেট করে অ্যাপ্লিকেশনের ভিউ তৈরি করে। টেমপ্লেটস এবং কম্পোনেন্ট কম্পোজিশন ব্যবহার করে আপনি অর্গানাইজড এবং ইফিশিয়েন্ট অ্যাপ্লিকেশন তৈরি করতে পারবেন।

১. কম্পোনেন্ট কম্পোজিশন (Component Composition)

Aurelia এর কম্পোনেন্ট কম্পোজিশন আপনাকে একাধিক কম্পোনেন্টকে একত্রিত করতে দেয়, যাতে একটি বড় অ্যাপ্লিকেশন তৈরি করা যায়। কম্পোনেন্ট সাধারণত একটি HTML টেমপ্লেট (UI), একটি জাভাস্ক্রিপ্ট/টাইপস্ক্রিপ্ট ফাইল (ভিউমডেল) এবং স্টাইলশিট (CSS বা SCSS) নিয়ে গঠিত হয়।

কম্পোনেন্ট তৈরি করা

Aurelia CLI এর মাধ্যমে নতুন কম্পোনেন্ট তৈরি করতে, কমান্ডটি ব্যবহার করুন:

au generate component component-name

এটি আপনার জন্য একটি নতুন কম্পোনেন্ট ফোল্ডার তৈরি করবে এবং এতে প্রয়োজনীয় HTML, CSS এবং JavaScript/TypeScript ফাইলগুলো তৈরি করবে।

কম্পোনেন্টের গঠন

একটি সাধারণ Aurelia কম্পোনেন্টের গঠন হল:

• component-name.html: কম্পোনেন্টের HTML টেমপ্লেট।
• component-name.js: কম্পোনেন্টের ভিউমডেল (যেখানে ফাংশন এবং ডেটা থাকে)।
• component-name.css: কম্পোনেন্টের জন্য কাস্টম স্টাইল।

কম্পোনেন্টে ডেটা বাইন্ডিং

Aurelia টেমপ্লেটের মাধ্যমে ডেটা বাইন্ডিং সাপোর্ট করে। উদাহরণস্বরূপ, যদি আপনি একটি ডেটা মডেলকে UI-তে বাইন্ড করতে চান, তবে টেমপ্লেটে {} ব্যবহার করে ডেটা দেখাতে পারেন:

<template>
  <h1>${message}</h1>
</template>

এবং component-name.js ফাইলে, এই message ভ্যারিয়েবলটি ডিফাইন করতে হবে:

export class ComponentName {
  message = 'Hello from Aurelia!';
}

কম্পোনেন্ট ব্যবহার করা

Aurelia এর component composition এর মাধ্যমে আপনি একটি কম্পোনেন্টের ভিতরে অন্য কম্পোনেন্ট ব্যবহার করতে পারেন। উদাহরণস্বরূপ:

app.html:

<template>
  <require from="./components/my-component"></require>
  <my-component></my-component>
</template>

এখানে <require> ট্যাগটি অন্য কম্পোনেন্টে রেফারেন্স করে এবং <my-component> ট্যাগটি সেই কম্পোনেন্টকে অ্যাপ্লিকেশনে অন্তর্ভুক্ত করে।

২. টেমপ্লেটস (Templates)

Aurelia টেমপ্লেটগুলি HTML টেমপ্লেটের মতোই, তবে এতে ডেটা বাইন্ডিং এবং এভেন্ট হ্যান্ডলিং যুক্ত থাকে। Aurelia এর টেমপ্লেটগুলো আপনাকে ডায়নামিক ভিউ তৈরি করতে সাহায্য করে যা অ্যাপ্লিকেশন স্টেটের পরিবর্তনের সাথে সাথে আপডেট হয়।

ডেটা বাইন্ডিং টেমপ্লেটের মাধ্যমে

Aurelia-তে ডেটা বাইন্ডিং খুবই শক্তিশালী। এটি two-way binding, one-way binding, এবং event binding সাপোর্ট করে।

• One-Way Data Binding: ডেটা একদিকে ভিউতে প্রবাহিত হয়। উদাহরণ:

  <template>
    <h1>${message}</h1>
  </template>
  

  এখানে, message ভ্যারিয়েবলটি one-wayভাবে h1 ট্যাগে প্রদর্শিত হবে।

• Two-Way Data Binding: যখন ভিউতে ডেটা পরিবর্তিত হয়, তখন সেটি মডেলেও আপডেট হবে। এবং যখন মডেলে ডেটা পরিবর্তিত হয়, তখন ভিউও আপডেট হবে। উদাহরণ:

  <template>
    <input value.bind="name" />
    <h1>Hello, ${name}</h1>
  </template>
  

  এখানে, আপনি ইনপুট ফিল্ডে যে নাম লিখবেন তা সোজা name ভ্যারিয়েবলে প্রবাহিত হবে, এবং সেই নামটি h1 ট্যাগে প্রদর্শিত হবে।

• Event Binding: আপনি HTML এলিমেন্টে বিভিন্ন ইভেন্টের সাথে ফাংশন অ্যাসাইন করতে পারেন। উদাহরণ:

  <template>
    <button click.delegate="sayHello()">Say Hello</button>
  </template>
  

  component-name.js:

  export class ComponentName {
    sayHello() {
      alert('Hello, Aurelia!');
    }
  }
  

  এখানে, বাটন ক্লিক করলে sayHello() ফাংশনটি কল হবে এবং একটি এলার্ট দেখাবে।

৩. লুপিং এবং কন্ডিশনাল রেন্ডারিং

Aurelia টেমপ্লেট আপনাকে লুপিং এবং কন্ডিশনাল রেন্ডারিং করতে সাহায্য করে।

• অ্যারেতে লুপিং:

  <template>
    <ul>
      <li repeat.for="item of items">${item}</li>
    </ul>
  </template>
  

  component-name.js:

  export class ComponentName {
    items = ['Apple', 'Banana', 'Orange'];
  }
  

  এখানে, items অ্যারের প্রতিটি আইটেমের জন্য একটি li এলিমেন্ট রেন্ডার হবে।

• কন্ডিশনাল রেন্ডারিং:

  <template>
    <div if.bind="isVisible">This is visible only if isVisible is true.</div>
  </template>
  

  component-name.js:

  export class ComponentName {
    isVisible = true;
  }
  

  এখানে, isVisible যদি true হয়, তবে <div> ট্যাগটি রেন্ডার হবে।

৪. কম্পোনেন্ট স্টাইলিং

Aurelia ফ্রেমওয়ার্কে কম্পোনেন্ট স্তরে স্টাইলিং করা সম্ভব। আপনি প্রতিটি কম্পোনেন্টের জন্য আলাদা CSS বা SCSS ফাইল তৈরি করতে পারেন।

উদাহরণস্বরূপ, component-name.css ফাইলে আপনি কম্পোনেন্টের জন্য স্টাইল লিখতে পারেন:

h1 {
  color: blue;
}

উপসংহার

Aurelia-তে কম্পোনেন্ট কম্পোজিশন এবং টেমপ্লেট ব্যবহারের মাধ্যমে আপনি ডাইনামিক এবং মডুলার অ্যাপ্লিকেশন তৈরি করতে পারবেন। কম্পোনেন্ট কম্পোজিশন আপনাকে অ্যাপ্লিকেশনের ভিউগুলো সহজে ম্যানেজ এবং রিইউজ করতে সাহায্য করে, এবং টেমপ্লেটস ডেটা বাইন্ডিং, ইভেন্ট হ্যান্ডলিং এবং লুপিংয়ের মাধ্যমে আপনাকে রিচ ইউজার ইন্টারফেস তৈরির সুযোগ দেয়। Aurelia এর এই বৈশিষ্ট্যগুলো আপনাকে আরো মডুলার, স্কেলেবল এবং কার্যকরী অ্যাপ্লিকেশন তৈরি করতে সক্ষম করবে।

Aurelia একটি শক্তিশালী ডাটা বাইন্ডিং সিস্টেম সরবরাহ করে, যা অ্যাপ্লিকেশনের মডেল এবং ভিউয়ের মধ্যে তথ্যের সিঙ্ক্রোনাইজেশন সহজ করে তোলে। Aurelia তিনটি প্রধান ডাটা বাইন্ডিং পদ্ধতি সমর্থন করে: One-way binding, Two-way binding, এবং String Interpolation।

১. One-way Data Binding

One-way data binding এর মাধ্যমে ডেটা শুধুমাত্র মডেল থেকে ভিউতে প্রবাহিত হয়। এটি সাধারণত তখন ব্যবহৃত হয় যখন আপনি মডেলের মান পরিবর্তন করে ভিউ আপডেট করতে চান, কিন্তু ভিউয়ের মাধ্যমে মডেল পরিবর্তন করা হয় না। এই ধরনের বাইন্ডিং সাধারণত ডেটা প্রদর্শনের জন্য ব্যবহৃত হয়, যেমন একটি লেবেল বা টেক্সট ফিল্ডে ডেটা দেখানো।

উদাহরণ:

<template>
  <p>${message}</p> <!-- One-way data binding -->
</template>

export class App {
  message = "Hello, Aurelia!";
}

এখানে, message মডেল থেকে <p> ট্যাগে মান প্রবাহিত হবে। তবে, এটি one-way বাইন্ডিং হওয়ায়, ভিউয়ের মাধ্যমে মডেল পরিবর্তন করা যাবে না।

২. Two-way Data Binding

Two-way data binding এর মাধ্যমে মডেল এবং ভিউ একে অপরের সাথে সিঙ্ক্রোনাইজড থাকে। মডেল এবং ভিউ উভয়ই একে অপরকে আপডেট করতে পারে। এই ধরনের বাইন্ডিং সাধারণত ফর্ম ইনপুট বা ইউজার থেকে পাওয়া ডেটা আপডেট করার জন্য ব্যবহৃত হয়।

উদাহরণ:

<template>
  <input value.bind="message"> <!-- Two-way data binding -->
  <p>Your message: ${message}</p>
</template>

export class App {
  message = "Hello, Aurelia!";
}

এখানে, value.bind="message" নির্দেশ করে যে ইনপুটের মান মডেল message এর সাথে বাইন্ড হবে। যখন ইনপুট ফিল্ডে ইউজার কোনো মান ইনপুট করবে, তখন message মডেল আপডেট হবে এবং ভিউও সেই পরিবর্তন দেখাবে (এটি two-way বাইন্ডিং)। একইভাবে, যদি মডেল পরিবর্তিত হয়, তা ভিউতে আপডেট হবে।

৩. String Interpolation

String interpolation হল একটি সরল পদ্ধতি যার মাধ্যমে মডেল থেকে ডেটা সরাসরি HTML টেমপ্লেটে ইন্টারপোলেট করা হয়। এটি সাধারণত one-way data binding এর মতই কাজ করে, কিন্তু এটি আরো সহজ এবং সরলভাবে ব্যবহার করা যায়।

উদাহরণ:

<template>
  <h1>${message}</h1> <!-- String Interpolation -->
</template>

export class App {
  message = "Welcome to Aurelia!";
}

এখানে ${message} হল string interpolation। এটি একটি মডেল ফিল্ডের মানকে সরাসরি HTML টেমপ্লেটে এক্সপ্রেস করে। মডেল পরিবর্তন হলে, এই মান স্বয়ংক্রিয়ভাবে টেমপ্লেটে আপডেট হবে।

Summary of Data Binding Types in Aurelia

উপসংহার

Aurelia ডাটা বাইন্ডিং ব্যবস্থার মাধ্যমে মডেল এবং ভিউয়ের মধ্যে ডেটার সিঙ্ক্রোনাইজেশন অত্যন্ত সহজ হয়। One-way, Two-way, এবং String Interpolation এর মাধ্যমে আপনি বিভিন্ন পরিস্থিতিতে সহজে ডেটা সিঙ্ক্রোনাইজ করতে পারেন এবং আপনার অ্যাপ্লিকেশনের কার্যকারিতা বাড়াতে পারেন।