Aurelia এর টেমপ্লেট এবং ডিরেক্টিভস

Aurelia একটি শক্তিশালী ফ্রেমওয়ার্ক, যা HTML এবং JavaScript এর সাথে সরাসরি ইন্টিগ্রেট হয়ে কাজ করে। Aurelia এর টেমপ্লেট এবং ডিরেক্টিভস একে একটি উচ্চমানের, ব্যবহারকারী-বান্ধব ফ্রেমওয়ার্ক বানায়। এই টেমপ্লেট এবং ডিরেক্টিভসের মাধ্যমে আপনি আপনার UI কম্পোনেন্ট এবং কার্যকারিতা পরিচালনা করতে পারেন।

১. Aurelia এর টেমপ্লেট

Aurelia টেমপ্লেটগুলি মূলত HTML ফাইল হয়, যেখানে data binding, conditionals, loops, এবং অন্যান্য ইন্টারেক্টিভ বৈশিষ্ট্য সমর্থন করা হয়। Aurelia এর টেমপ্লেট সাধারণত HTML এর মত দেখতে হলেও এতে কিছু বিশেষ বৈশিষ্ট্য এবং সিনট্যাক্স থাকে যা Aurelia এর সাথে কাজ করতে সাহায্য করে।

উদাহরণ:

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

এই টেমপ্লেটটি একটি ইনপুট ফিল্ড এবং একটি <h1> এলিমেন্টকে বাইন্ড করছে, যেখানে ${name} হল two-way binding। যখন ইনপুট ফিল্ডে নাম লেখা হবে, তখন সেটি স্বয়ংক্রিয়ভাবে <h1> ট্যাগে প্রদর্শিত হবে।

২. Aurelia এর ডিরেক্টিভস

Aurelia এর ডিরেক্টিভস আপনাকে HTML এলিমেন্টগুলোর আচরণ কাস্টমাইজ করতে সহায়তা করে। এগুলো সাধারণত attributes বা elements হিসেবে কাজ করে, যা DOM-এ কিছু কার্যকলাপ সম্পাদন করে।

Aurelia এ কিছু সাধারণ ডিরেক্টিভস রয়েছে, যেমন:

১. if ডিরেক্টিভ

if ডিরেক্টিভের মাধ্যমে আপনি কোন অংশের HTML ভিউ কেবল তখনই প্রদর্শন করতে পারেন যখন কোনো শর্ত পূর্ণ হয়। এটি সাধারণত একটি শর্ত (Boolean) পরীক্ষার জন্য ব্যবহৃত হয়।

উদাহরণ:

<template>
  <div if.bind="isVisible">This content is visible when isVisible is true</div>
  <button click.delegate="toggleVisibility()">Toggle Visibility</button>
</template>

export class App {
  isVisible = true;

  toggleVisibility() {
    this.isVisible = !this.isVisible;
  }
}

এখানে if.bind="isVisible" চেক করে যদি isVisible ট্রুথি হয়, তাহলে ডিভ ট্যাগটি প্রদর্শিত হবে। অন্যথায়, এটি হিডেন থাকবে।

২. repeat ডিরেক্টিভ

repeat ডিরেক্টিভটি একটি লিস্ট বা আর্ডারেবল আইটেমের উপর লুপিং করার জন্য ব্যবহৃত হয়। এটি একটি লিস্টের প্রতিটি আইটেমের জন্য HTML এলিমেন্ট তৈরি করে।

উদাহরণ:

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

export class App {
  items = ['Apple', 'Banana', 'Cherry'];
}

এখানে repeat.for="item of items" ডিরেক্টিভটি items অ্যারের প্রতিটি আইটেমের জন্য একটি <li> ট্যাগ তৈরি করবে এবং ওই আইটেমটি UI তে প্রদর্শন করবে।

৩. model ডিরেক্টিভ

model ডিরেক্টিভটি one-way ডাটা বাইন্ডিং এবং two-way ডাটা বাইন্ডিং এর জন্য ব্যবহার করা হয়। এটি HTML এর ইনপুট ফিল্ড বা ফর্ম ফিল্ডের সাথে ব্যবহৃত হয়।

উদাহরণ:

<template>
  <input model.bind="name">
  <p>Your name is: ${name}</p>
</template>

export class App {
  name = "John Doe";
}

এখানে model.bind="name" ডিরেক্টিভটি ইনপুট ফিল্ডকে name মডেল ডেটার সাথে বাইন্ড করবে। এই ডাটা বাইন্ডিং two-way এবং ইনপুটের মাধ্যমে name আপডেট হবে।

৪. show এবং hide ডিরেক্টিভ

Aurelia আপনাকে HTML এলিমেন্টকে শো বা হাইড করার জন্য show এবং hide ডিরেক্টিভ সরবরাহ করে, যা বিশেষ করে শর্তাধীন ভিউ রেন্ডারিংয়ের জন্য ব্যবহার করা হয়।

উদাহরণ:

<template>
  <div show.bind="isVisible">This will be shown when isVisible is true.</div>
  <div hide.bind="isHidden">This will be hidden when isHidden is true.</div>
</template>

export class App {
  isVisible = true;
  isHidden = false;
}

এখানে show.bind="isVisible" এবং hide.bind="isHidden" ডিরেক্টিভস ব্যবহার করা হয়েছে। যখন isVisible ট্রুথি হবে, প্রথম ডিভটি দেখাবে এবং isHidden ট্রুথি হলে দ্বিতীয় ডিভটি হিডেন হবে।

৫. class এবং style ডিরেক্টিভ

Aurelia আপনাকে class এবং style ডিরেক্টিভ সরবরাহ করে, যার মাধ্যমে আপনি HTML এলিমেন্টের CSS ক্লাস এবং স্টাইল শর্তানুযায়ী পরিবর্তন করতে পারবেন।

উদাহরণ:

<template>
  <button class.bind="buttonClass">Click me</button>
  <div style.bind="style">Styled Div</div>
</template>

export class App {
  buttonClass = "btn-primary";
  style = "background-color: blue; color: white;";
}

এখানে class.bind="buttonClass" ডিরেক্টিভের মাধ্যমে বাটনের ক্লাস বাইন্ড করা হয়েছে এবং style.bind="style" ডিরেক্টিভের মাধ্যমে ডিভটির স্টাইল বাইন্ড করা হয়েছে।

উপসংহার

Aurelia এর টেমপ্লেট এবং ডিরেক্টিভস আপনাকে একটি ইউজার ইন্টারফেস তৈরি করার সময়, ডাটা বাইন্ডিং, শর্তাধীন রেন্ডারিং, লুপিং, ক্লাস এবং স্টাইল পরিবর্তন করার জন্য শক্তিশালী টুলস সরবরাহ করে। এর মাধ্যমে আপনি আপনার অ্যাপ্লিকেশনকে আরও ইন্টারেক্টিভ এবং ফ্লেক্সিবলভাবে তৈরি করতে পারেন। Aurelia এর if, repeat, model, show, hide সহ অন্যান্য ডিরেক্টিভস খুবই সহজে HTML এলিমেন্টগুলোর আচরণ নিয়ন্ত্রণ করতে সাহায্য করে।

Aurelia ফ্রেমওয়ার্ক একটি শক্তিশালী এবং নমনীয় টেমপ্লেটিং সিস্টেম প্রদান করে যা ডেটা বাইন্ডিং এবং UI-র সাথে মিথস্ক্রিয়া করতে ব্যবহৃত হয়। Aurelia এর টেমপ্লেটিং সিস্টেম HTML-ভিত্তিক এবং এটি জাভাস্ক্রিপ্ট/টাইপস্ক্রিপ্ট কোডের সঙ্গে ডাইনামিকভাবে কাজ করে। এটি একটি ডিক্লারেটিভ ফ্রেমওয়ার্ক যা HTML এবং JavaScript এর মধ্যে শক্তিশালী ইন্টিগ্রেশন তৈরি করে।

Aurelia-তে টেমপ্লেট এবং ভিউমডেল একসাথে কাজ করে এবং সহজে ডেটা বাইন্ডিং এবং লজিক্যাল ফাংশন তৈরি করতে সহায়তা করে।

Aurelia টেমপ্লেটিং সিস্টেমের মূল বৈশিষ্ট্য

১. টেমপ্লেট সিনট্যাক্স

Aurelia এর টেমপ্লেট HTML সিনট্যাক্স অনুসরণ করে, যা ডেভেলপারদের জন্য খুবই পরিচিত এবং সহজ। এতে জাভাস্ক্রিপ্ট/টাইপস্ক্রিপ্ট কোডের সাথে ডেটা বাইন্ডিং এবং লোকিক্যাল কন্ট্রোল যুক্ত করা যায়। এখানে সাধারণ HTML ট্যাগগুলোর সাথে কিছু Aurelia-কেস সিনট্যাক্স ব্যবহৃত হয়, যেমন ${} সিঙ্ক্রোনাইজড ডেটা এবং bind বা one-way বাইন্ডিং।

উদাহরণ:

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

app.js:

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

এখানে, ${message} দ্বারা message প্রোপার্টি UI তে প্রদর্শিত হচ্ছে এবং click.delegate দ্বারা বাটনে ক্লিক করার পর changeMessage() মেথড কল হবে, যা message প্রোপার্টির মান পরিবর্তন করবে।

২. ডেটা বাইন্ডিং

Aurelia-এর টেমপ্লেটিং সিস্টেমে ডেটা বাইন্ডিং অত্যন্ত গুরুত্বপূর্ণ একটি বৈশিষ্ট্য। এটি UI এবং ডেটা মডেলের মধ্যে সিঙ্ক্রোনাইজেশনকে সহজ এবং স্বচ্ছ করে তোলে। Aurelia দুটি প্রধান ডেটা বাইন্ডিং পদ্ধতি সাপোর্ট করে:

• One-way data binding: ডেটা মডেল থেকে ভিউতে পাঠানো হয়।
• Two-way data binding: ডেটা মডেল এবং UI একে অপরের সাথে সিঙ্ক্রোনাইজ থাকে।

উদাহরণ:

<template>
  <input value.two-way="name">
  <h2>Hello, ${name}!</h2>
</template>

app.js:

export class App {
  name = 'John';
}

এখানে, value.two-way="name" দ্বারা ইনপুট ফিল্ডে টাইপ করা প্রতিটি অক্ষর name প্রোপার্টিতে সিঙ্ক্রোনাইজ হয়ে যাবে, এবং UI তে তা প্রদর্শিত হবে।

৩. এভেন্ট বাইন্ডিং

Aurelia সহজেই ইভেন্ট বাইন্ডিং সমর্থন করে। এটি click, input, change ইত্যাদি ইভেন্টের সাথে যুক্ত হতে পারে। এই ইভেন্টগুলোকে event.delegate, event.trigger বা event.capture ব্যবহার করে অ্যাপ্লিকেশনের ফাংশনালিটি ট্রিগার করা যায়।

উদাহরণ:

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

app.js:

export class App {
  sayHello() {
    alert('Hello from Aurelia!');
  }
}

এখানে, click.delegate="sayHello()" কমান্ডটি বাটনে ক্লিক হলে sayHello() মেথড কল করবে এবং এলার্ট দেখাবে।

৪. নেস্টেড কম্পোনেন্টস (Nested Components)

Aurelia আপনাকে কম্পোনেন্ট-based আর্কিটেকচার ব্যবহার করার সুযোগ দেয়। আপনি সহজেই একটি কম্পোনেন্ট তৈরি করতে পারেন এবং তা অন্য একটি কম্পোনেন্টে নেস্ট করতে পারেন। এতে কোডের পুনরায় ব্যবহারযোগ্যতা এবং মডুলারিটি বৃদ্ধি পায়।

উদাহরণ:

• parent.html:

<template>
  <child-component name="Aurelia"></child-component>
</template>

• child.html:

<template>
  <h2>Hello, ${name}!</h2>
</template>

• child.js:

export class Child {
  name = 'Child Component';
}

এখানে, child-component একটি নেস্টেড কম্পোনেন্ট হিসেবে ব্যবহার করা হয়েছে এবং এটি name প্রোপার্টি প্রদর্শন করবে।

৫. স্টাইলিং

Aurelia টেমপ্লেটিং সিস্টেমে স্টাইলিং যোগ করা খুব সহজ। আপনি CSS, SCSS বা স্টাইলশীট ফাইল ব্যবহার করতে পারেন। আপনি কম্পোনেন্ট লেভেলে স্কোপড স্টাইলিং বা গ্লোবাল স্টাইল ব্যবহার করতে পারেন।

উদাহরণ:

<template>
  <h1 class="welcome-message">Welcome to Aurelia!</h1>
</template>

<style>
  .welcome-message {
    color: blue;
  }
</style>

এখানে, style ট্যাগের মাধ্যমে welcome-message ক্লাসের জন্য স্টাইলিং করা হয়েছে।

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

Aurelia টেমপ্লেটিং সিস্টেমে কম্পোনেন্টের লাইফসাইকেল হুকস ব্যবহারের সুযোগ রয়েছে। এই হুকসগুলির মাধ্যমে আপনি কম্পোনেন্টের ক্রিয়েট, ইনিশিয়ালাইজ, রেন্ডার, এবং ডেস্ট্রয়ের সময় কিছু কার্যক্রম সম্পাদন করতে পারেন।

হুকস উদাহরণ:

• attached(): কম্পোনেন্ট DOM এ যুক্ত হওয়ার পর কল হয়।
• detached(): কম্পোনেন্ট DOM থেকে সরানোর পর কল হয়।

export class App {
  attached() {
    console.log('Component attached to DOM');
  }

  detached() {
    console.log('Component detached from DOM');
  }
}

উপসংহার

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

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

কাস্টম HTML এলিমেন্ট তৈরি করা

Aurelia-তে কাস্টম HTML এলিমেন্ট তৈরি করা অত্যন্ত সহজ। কাস্টম এলিমেন্ট তৈরি করতে, আপনি সাধারণত একটি <template> ট্যাগের মধ্যে HTML কন্টেন্ট এবং একটি JavaScript ক্লাস ব্যবহার করবেন যা সেই কাস্টম এলিমেন্টের কার্যক্রম (লজিক) ধারণ করবে।

কাস্টম HTML এলিমেন্ট তৈরি করার ধাপ

1. কাস্টম এলিমেন্টের জন্য একটি নতুন ফাইল তৈরি করুন:

   উদাহরণস্বরূপ, my-element.html এবং my-element.js ফাইল তৈরি করুন।

2. HTML টেমপ্লেট তৈরি করুন (my-element.html):

   <template>
     <h2>Welcome to my custom element!</h2>
     <p>This is a custom element in Aurelia.</p>
     <button click.delegate="changeMessage()">Click me</button>
   </template>
   

3. JavaScript ক্লাস তৈরি করুন (my-element.js):

   export class MyElement {
     changeMessage() {
       alert("Button clicked in custom element!");
     }
   }
   

4. কাস্টম এলিমেন্টটি অ্যাপ্লিকেশনে ব্যবহার করুন:

   <template>
     <my-element></my-element>
   </template>
   

   এখন, আপনার কাস্টম এলিমেন্ট <my-element> আপনার অ্যাপ্লিকেশনে কাজ করবে এবং আপনি changeMessage() মেথড কল করে এলিমেন্টের বাটনে ক্লিক করলে এলার্ট দেখতে পাবেন।

কাস্টম HTML অ্যাট্রিবিউট তৈরি করা

Aurelia এর কাস্টম অ্যাট্রিবিউটসের মাধ্যমে, আপনি HTML এলিমেন্টের বৈশিষ্ট্য এবং আচরণ পরিবর্তন করতে পারেন। কাস্টম অ্যাট্রিবিউট তৈরি করতে আপনাকে একটি @bindable ডেকোরেটর ব্যবহার করতে হবে, যা অ্যাট্রিবিউটের সাথে সংযুক্ত ডেটাকে বাইন্ড করতে সাহায্য করবে।

কাস্টম অ্যাট্রিবিউট তৈরি করার ধাপ

1. কাস্টম অ্যাট্রিবিউটের জন্য একটি নতুন ফাইল তৈরি করুন:

   উদাহরণস্বরূপ, color-change.js এবং color-change.html ফাইল তৈরি করুন।

2. JavaScript ক্লাস তৈরি করুন (color-change.js):

   import {bindable} from 'aurelia-framework';
   
   export class ColorChange {
     @bindable color = 'red';  // default color
   
     changeColor() {
       document.body.style.backgroundColor = this.color;
     }
   }
   

3. HTML টেমপ্লেট তৈরি করুন (color-change.html):

   <template>
     <button click.delegate="changeColor()">Change Background Color</button>
     <input type="text" value.bind="color" placeholder="Enter a color">
   </template>
   

4. এটি অ্যাপ্লিকেশনে ব্যবহার করুন:

   আপনার অ্যাপ্লিকেশনে <color-change> এলিমেন্ট ব্যবহার করতে পারেন:

   <template>
     <color-change color="blue"></color-change>
   </template>
   

   এখন, আপনি যখন color="blue" অ্যাট্রিবিউটটি সেট করবেন, তখন ক্লিক করলে পেজের ব্যাকগ্রাউন্ড ব্লু হয়ে যাবে। আপনি ইনপুট ফিল্ডে অন্য কোনো রঙের নাম লিখে তা পরিবর্তন করতে পারবেন।

কাস্টম অ্যাট্রিবিউট এবং এলিমেন্টে ডেটা বাইন্ডিং

Aurelia কাস্টম এলিমেন্ট এবং অ্যাট্রিবিউটগুলোর মধ্যে ডেটা বাইন্ডিং ব্যবহার করে আপনার অ্যাপ্লিকেশনে আরও ইন্টারঅ্যাকটিভিটি এবং ফ্লেক্সিবিলিটি যোগ করতে পারে।

উদাহরণ: কাস্টম এলিমেন্ট এবং অ্যাট্রিবিউটের সাথে ডেটা বাইন্ডিং

ধরা যাক, আপনি একটি কাস্টম এলিমেন্ট তৈরি করেছেন যা কোনো সাপোর্ট ম্যাসেজ দেখায় এবং সেটি বাইন্ড করা হয়।

<template>
  <h3>${message}</h3>
  <button click.delegate="changeMessage()">Change Message</button>
</template>

export class MessageBox {
  message = "Welcome to Aurelia";

  changeMessage() {
    this.message = "Message has been changed!";
  }
}

এখানে, message ভ্যারিয়েবলটি UI-তে বাইন্ড করা হয়েছে এবং button ক্লিক করলে changeMessage() ফাংশন কল হবে, যা message ভ্যালু পরিবর্তন করবে।

কাস্টম অ্যাট্রিবিউটের কনফিগারেশন

Aurelia এর কাস্টম অ্যাট্রিবিউট বা কাস্টম এলিমেন্টগুলোর জন্য bindable ডেকোরেটরের মাধ্যমে ইনপুট প্যারামিটার নির্ধারণ করা হয়। আপনি অ্যাট্রিবিউটের মাধ্যমে অ্যাপ্লিকেশনের আচরণ নিয়ন্ত্রণ করতে পারেন।

উদাহরণ: কাস্টম অ্যাট্রিবিউটের মাধ্যমে স্টাইল পরিবর্তন

import {bindable} from 'aurelia-framework';

export class StyleChange {
  @bindable color = 'green';
  @bindable size = '16px';

  changeStyle() {
    document.body.style.color = this.color;
    document.body.style.fontSize = this.size;
  }
}

<template>
  <button click.delegate="changeStyle()">Change Text Style</button>
  <input type="text" value.bind="color" placeholder="Enter text color">
  <input type="text" value.bind="size" placeholder="Enter font size">
</template>

এখন আপনি কাস্টম অ্যাট্রিবিউট দিয়ে টেক্সটের রঙ এবং ফন্ট সাইজ পরিবর্তন করতে পারবেন। color এবং size অ্যাট্রিবিউটগুলি bindable হয়ে উঠেছে, এবং আপনি যখন ইনপুটের মান পরিবর্তন করবেন, তখন সেই পরিবর্তন UI তে প্রতিফলিত হবে।

উপসংহার

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

Aurelia ফ্রেমওয়ার্কে Repeaters এবং Conditionals হল দুটি গুরুত্বপূর্ণ ফিচার যা ডায়নামিক এবং ইন্টারঅ্যাকটিভ UI তৈরি করতে ব্যবহৃত হয়। এগুলি ডেটা বাইন্ডিং এবং ডেটা ম্যানিপুলেশনের জন্য ব্যবহার করা হয়, যাতে আপনি সহজেই কন্টেন্ট পুনরাবৃত্তি (loop) করতে পারেন এবং শর্তসাপেক্ষ কন্টেন্ট রেন্ডার করতে পারেন।

এখানে if.bind এবং repeat.for কম্পোনেন্টস নিয়ে আলোচনা করা হবে, যা Aurelia এর ডেটা বাইন্ডিং মেকানিজমে গুরুত্বপূর্ণ ভূমিকা রাখে।

১. Conditionals (if.bind)

Aurelia তে if.bind ডিরেকটিভটি ব্যবহার করে আপনি শর্তসাপেক্ষভাবে কোনো কন্টেন্ট বা HTML উপাদান প্রদর্শন করতে পারেন। এটি একটি boolean অভিব্যক্তি যাচাই করে এবং শর্ত পূর্ণ হলে কন্টেন্ট রেন্ডার করে।

উদাহরণ: if.bind ব্যবহার

<template>
  <button click.delegate="toggleMessage()">Toggle Message</button>

  <!-- if.bind: শর্তের ভিত্তিতে message div টি প্রদর্শন বা скрыুন -->
  <div if.bind="showMessage">
    <p>The message is visible!</p>
  </div>
</template>

// app.js
export class App {
  showMessage = false;

  toggleMessage() {
    this.showMessage = !this.showMessage;  // value toggle করা হচ্ছে
  }
}

কিভাবে এটি কাজ করে:

1. প্রথমে showMessage প্রপার্টি false সেট করা হয়েছে, অর্থাৎ message দেখানো হবে না।
2. যখন বাটনে ক্লিক করা হয়, toggleMessage() ফাংশন কল হয় এবং showMessage প্রপার্টি পরিবর্তিত হয়।
3. যখন showMessage true হয়, তখন <div> ট্যাগটি রেন্ডার হবে এবং "The message is visible!" প্রদর্শিত হবে।
4. যখন showMessage false হয়, <div> ট্যাগটি আর রেন্ডার হবে না।

এভাবে, if.bind শর্তসাপেক্ষভাবে UI উপাদানগুলো প্রদর্শন বা লুকিয়ে রাখতে ব্যবহৃত হয়।

২. Repeaters (repeat.for)

repeat.for ডিরেকটিভটি ডেটা তালিকা বা অ্যারের মধ্যে পুনরাবৃত্তি করতে ব্যবহৃত হয়। এটি একটি ফ্রন্ট-এন্ড ডাইনামিক তালিকা তৈরি করতে সাহায্য করে, যা একটি কন্টেইনারে একাধিক উপাদান রেন্ডার করে।

উদাহরণ: repeat.for ব্যবহার

<template>
  <ul>
    <!-- repeat.for: এই লুপের মাধ্যমে fruits অ্যারে থেকে প্রতিটি ফলের নাম প্রদর্শন হবে -->
    <li repeat.for="fruit of fruits">${fruit}</li>
  </ul>
</template>

// app.js
export class App {
  fruits = ['Apple', 'Banana', 'Orange', 'Mango']; // ডেটার অ্যারে
}

কিভাবে এটি কাজ করে:

1. এখানে fruits নামে একটি অ্যারে রয়েছে, যা কিছু ফলের নাম ধারণ করে।
2. repeat.for="fruit of fruits" নির্দেশনা অনুযায়ী, fruits অ্যারের প্রতিটি উপাদানের জন্য একটি <li> ট্যাগ তৈরি হবে।
3. প্রতিটি <li> ট্যাগে fruit অ্যারের মান (যেমন, "Apple", "Banana" ইত্যাদি) প্রদর্শিত হবে।

এভাবে, repeat.for ডিরেকটিভ ব্যবহার করে ডেটার তালিকা বা অ্যারের মধ্যে পুনরাবৃত্তি করা যায় এবং ডাইনামিকভাবে HTML উপাদান তৈরি করা যায়।

৩. if.bind এবং repeat.for একসাথে ব্যবহার করা

if.bind এবং repeat.for ডিরেকটিভস একসাথে ব্যবহার করে আপনি তালিকা বা কন্টেন্ট প্রদর্শনের জন্য শর্তযুক্ত লজিক প্রয়োগ করতে পারেন।

উদাহরণ: if.bind এবং repeat.for একসাথে ব্যবহার

<template>
  <button click.delegate="toggleList()">Toggle Fruits List</button>

  <div if.bind="showList">
    <ul>
      <li repeat.for="fruit of fruits">${fruit}</li>
    </ul>
  </div>
</template>

// app.js
export class App {
  fruits = ['Apple', 'Banana', 'Orange', 'Mango'];  // ডেটা
  showList = false;

  toggleList() {
    this.showList = !this.showList;  // fruits তালিকা দেখানোর জন্য toggle
  }
}

কিভাবে এটি কাজ করে:

1. প্রথমে showList প্রপার্টি false এ সেট করা হয়েছে, তাই তালিকা লুকানো থাকবে।
2. toggleList() মেথড কল হলে showList পরিবর্তিত হবে এবং ফলস্বরূপ তালিকা <ul> শো হবে।
3. repeat.for="fruit of fruits" ডিরেকটিভটি fruits অ্যারের প্রতি আইটেমের জন্য একটি <li> ট্যাগ রেন্ডার করবে, যেখানে ফলের নাম প্রদর্শিত হবে।

এভাবে, if.bind এবং repeat.for একসাথে ব্যবহার করে একটি শর্তাধীন এবং ডাইনামিক তালিকা তৈরি করা সম্ভব।

উপসংহার

Aurelia ফ্রেমওয়ার্কে Repeaters (যেমন repeat.for) এবং Conditionals (যেমন if.bind) ব্যবহারের মাধ্যমে ডাইনামিক এবং ইন্টারঅ্যাকটিভ UI তৈরি করা সহজ হয়। এগুলি আপনাকে বিভিন্ন ধরনের ডেটা শর্তসাপেক্ষভাবে রেন্ডার বা পুনরাবৃত্তি করতে সাহায্য করে। ডেটা বাইন্ডিং এবং ডাইনামিক লিস্ট তৈরির জন্য এই ফিচারগুলি অত্যন্ত কার্যকরী।

Aurelia একটি শক্তিশালী এবং ফ্লেক্সিবল ফ্রেমওয়ার্ক যা custom directives এবং template boundaries তৈরি করার মাধ্যমে আপনাকে আপনার অ্যাপ্লিকেশন কাস্টমাইজ করতে দেয়। Custom Directives এবং Template Boundaries আপনাকে আপনার অ্যাপ্লিকেশনে নতুন আচরণ, স্টাইল এবং কার্যকলাপ যুক্ত করতে সহায়তা করে।

এখানে আমরা custom directives এবং template boundaries তৈরি করার প্রক্রিয়া ব্যাখ্যা করবো।

কাস্টম ডিরেক্টিভ (Custom Directives)

Directives হল এমন উপাদান যা HTML টেমপ্লেটে কোনো নির্দিষ্ট আচরণ বা কার্যকলাপ যুক্ত করতে ব্যবহৃত হয়। Aurelia-তে, আপনি কাস্টম ডিরেক্টিভ তৈরি করতে পারেন যেগুলো HTML এলিমেন্টগুলোর আচরণ কাস্টমাইজ করে।

১. কাস্টম ডিরেক্টিভ তৈরি করা

ধরা যাক, আমরা একটি কাস্টম ডিরেক্টিভ তৈরি করতে চাই যেটি একটি টেক্সট ইনপুট এলিমেন্টে uppercase কনভার্সন যোগ করবে।

Step 1: Create a Custom Attribute (Directives)

প্রথমে, uppercase ডিরেক্টিভটি তৈরি করতে একটি নতুন ফাইল তৈরি করুন, যেমন uppercase-attribute.js:

export class UppercaseAttribute {
  valueChanged(newValue, oldValue) {
    if (newValue) {
      this.element.value = newValue.toUpperCase();
    }
  }

  bind() {
    // Bind method is called when the element is attached
    this.element.value = this.value.toUpperCase();
  }
}

Step 2: Create the Template with the Custom Directive

এখন, uppercase ডিরেক্টিভটি টেমপ্লেটে ব্যবহার করতে হবে:

<template>
  <input value.bind="name | uppercase">
  <p>Your name in uppercase: ${name}</p>
</template>

এখানে, uppercase ডিরেক্টিভ ইনপুট ফিল্ডে ব্যবহার করা হয়েছে, যার মাধ্যমে ইনপুটের মান বড় হাতের অক্ষরে পরিণত হবে।

Step 3: Register the Custom Directive

এখন, uppercase ডিরেক্টিভটি aurelia.globalResources() দিয়ে গ্লোবালি রেজিস্টার করতে হবে।

import {UppercaseAttribute} from './uppercase-attribute';

export function configure(aurelia) {
  aurelia.globalResources(UppercaseAttribute);
}

কাস্টম টেমপ্লেট বাউন্ডারি (Custom Template Boundaries)

Template Boundaries হল সেই অংশ যেখানে আপনি কাস্টম ফিচার বা লজিক যুক্ত করতে চান, যাতে আপনি reusable components তৈরি করতে পারেন এবং সেগুলো অন্য টেমপ্লেটের মধ্যে ব্যবহার করতে পারেন।

২. কাস্টম টেমপ্লেট বাউন্ডারি তৈরি করা

ধরা যাক, আপনি একটি কাস্টম <my-button> কম্পোনেন্ট তৈরি করতে চান, যা একটি বাটন এলিমেন্টের আচরণ কাস্টমাইজ করবে।

Step 1: Create the Custom Element

প্রথমে my-button.js এবং my-button.html ফাইল তৈরি করুন।

my-button.js:

export class MyButton {
  buttonText = 'Click Me!';
}

my-button.html:

<template>
  <button>${buttonText}</button>
</template>

এটি একটি খুবই সাধারণ কাস্টম কম্পোনেন্ট যেটি একটি বাটন রেন্ডার করবে এবং বাটনের টেক্সট প্রদর্শন করবে।

Step 2: Using the Custom Element in Another Template

এখন আপনি এই কাস্টম কম্পোনেন্টটি অন্য টেমপ্লেটে ব্যবহার করতে পারেন:

<template>
  <my-button></my-button>
</template>

এখানে, <my-button> ট্যাগটি একটি কাস্টম কম্পোনেন্টের রেফারেন্স এবং এটি আপনার তৈরি করা MyButton এলিমেন্ট রেন্ডার করবে।

Step 3: Register the Custom Element

এই কাস্টম কম্পোনেন্টটি ব্যবহার করার জন্য আপনাকে aurelia.globalResources() দিয়ে রেজিস্টার করতে হবে।

import {MyButton} from './my-button';

export function configure(aurelia) {
  aurelia.globalResources(MyButton);
}

এখন, আপনি যেকোনো টেমপ্লেটে <my-button> কম্পোনেন্ট ব্যবহার করতে পারবেন।

কাস্টম ডিরেক্টিভ এবং টেমপ্লেট বাউন্ডারি সমন্বয়

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

উদাহরণ: কাস্টম ডিরেক্টিভ এবং কম্পোনেন্ট একসাথে ব্যবহার

ধরা যাক, আপনি MyButton কম্পোনেন্টে uppercase ডিরেক্টিভ যুক্ত করতে চান। এটি করার জন্য, আপনি my-button.html ফাইলে uppercase ডিরেক্টিভ ব্যবহার করতে পারেন:

<template>
  <button uppercase.bind="buttonText">${buttonText}</button>
</template>

এখন, buttonText প্রপার্টির মান যখন পরিবর্তিত হবে, তখন সেটি uppercase ডিরেক্টিভ দ্বারা বড় হাতের অক্ষরে পরিবর্তিত হবে।

উপসংহার

Aurelia তে custom directives এবং template boundaries আপনাকে শক্তিশালী, রিইউজেবল কম্পোনেন্ট এবং ডিরেক্টিভ তৈরি করতে সহায়তা করে। Directives আপনাকে HTML এলিমেন্টগুলোর আচরণ কাস্টমাইজ করার সুযোগ দেয়, যেখানে template boundaries ব্যবহার করে আপনি কাস্টম কম্পোনেন্ট তৈরি করতে পারেন এবং সেগুলোকে বিভিন্ন টেমপ্লেটে রিইউজ করতে পারেন।

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