ডাটাবাইন্ডিং এবং অবজারভেশন

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

ডাটাবাইন্ডিং (Data Binding)

ডাটাবাইন্ডিং হলো একটি প্রক্রিয়া যার মাধ্যমে আপনার অ্যাপ্লিকেশনের ডেটা মডেল এবং UI এর মধ্যে যোগাযোগ স্থাপন করা হয়। Aurelia দুই ধরনের ডাটাবাইন্ডিং সমর্থন করে:

1. Two-way Data Binding
2. One-way Data Binding

১. Two-way Data Binding

Aurelia ডিফল্টভাবে two-way data binding সমর্থন করে, যার মাধ্যমে আপনার UI এর পরিবর্তন এবং ডেটা মডেলের পরিবর্তন একে অপরের সাথে সিঙ্ক্রোনাইজ হয়ে যায়।

উদাহরণ:

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

app.html:

<template>
  <input value.two-way="name" placeholder="Enter your name">
  <h1>Hello, ${name}!</h1>
</template>

app.js:

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

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

২. One-way Data Binding

One-way data binding দ্বারা ডেটা শুধুমাত্র view থেকে model-এ পাঠানো হয় অথবা model থেকে view-এ। এটি সাধারনত ডেটা ভিউতে প্রদর্শন করার জন্য ব্যবহৃত হয়, যেমন:

উদাহরণ:

app.html:

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

app.js:

export class App {
  name = 'Aurelia User';
}

এখানে ${name} একটি one-way data binding, যা name প্রোপার্টির মান ভিউতে প্রদর্শন করবে।

অবজারভেশন (Observation)

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

Aurelia এর অবজারভার সিস্টেম getter/setter ফাংশনের মাধ্যমে কাজ করে, যা আপনার ডেটা মডেলকে পর্যবেক্ষণ করে এবং পরিবর্তন হলে ভিউকে আপডেট করে।

অবজার্ভেবল প্রোপার্টি

যখন একটি প্রোপার্টি পরিবর্তিত হয়, তখন Aurelia স্বয়ংক্রিয়ভাবে UI তে সেগুলি রিফ্লেক্ট করে। উদাহরণস্বরূপ, যদি আপনি একটি প্রোপার্টির মান পরিবর্তন করেন, তবে Aurelia UI তে সেই পরিবর্তনটি দেখতে পাবে।

app.html:

<template>
  <button click.delegate="increment()">Click me</button>
  <h1>You clicked the button ${count} times.</h1>
</template>

app.js:

export class App {
  count = 0;

  increment() {
    this.count++;
  }
}

এখানে count একটি অবজার্ভেবল প্রোপার্টি, এবং increment() মেথডে যখন এর মান পরিবর্তিত হয়, তখন UI তে সেই পরিবর্তনটি স্বয়ংক্রিয়ভাবে আপডেট হয়ে যায়।

Getter/Setter দিয়ে অবজারভেশন

Aurelia একটি getter/setter সিস্টেমও সাপোর্ট করে, যার মাধ্যমে আপনি ডেটা পরিবর্তন ট্র্যাক করতে পারেন। উদাহরণস্বরূপ, যদি আপনি একটি গেটার এবং সেটার ব্যবহার করেন, তখন ডেটার যে কোনো পরিবর্তন UI তে সঠিকভাবে প্রতিফলিত হবে।

app.js:

export class App {
  _name = 'John';

  get name() {
    return this._name;
  }

  set name(value) {
    this._name = value;
    // অবজারভেশন ইভেন্ট
    console.log(`Name has been changed to ${value}`);
  }
}

এখানে name প্রোপার্টির মাধ্যমে getter/setter ব্যবহৃত হয়েছে। যখন name এর মান পরিবর্তিত হয়, তখন সেটার নতুন মান অটোমেটিক্যালি রিফ্লেক্ট হবে এবং কনসোলে একটি মেসেজ দেখাবে।

ডাটাবাইন্ডিং এবং অবজারভেশন সিস্টেমের সুবিধা

• কমপ্লেক্স UI ইন্টারঅ্যাকশন সহজতর হয়: ডাটাবাইন্ডিং এবং অবজারভেশন সিস্টেমের মাধ্যমে খুব সহজেই UI এবং ডেটা মডেলকে সিঙ্ক্রোনাইজ করা যায়, যা কোডকে পরিষ্কার এবং ম্যানেজেবল রাখে।
• স্বয়ংক্রিয় UI আপডেট: ডেটার যেকোনো পরিবর্তন UI তে অটোমেটিক্যালি আপডেট হয়ে যায়, ফলে ডেভেলপারদেরকে ম্যানুয়ালি DOM আপডেট করার প্রয়োজন হয় না।
• ক্লিন এবং স্কেলেবল কোড: ডাটাবাইন্ডিং এবং অবজারভেশন ব্যবহারের মাধ্যমে কোড সহজ, ক্লিন এবং স্কেলেবল হয়ে ওঠে, যা বড় অ্যাপ্লিকেশন তৈরি করার জন্য উপযুক্ত।

উপসংহার

Aurelia এর ডাটাবাইন্ডিং এবং অবজারভেশন সিস্টেম অ্যাপ্লিকেশনের পারফরম্যান্স এবং ডেভেলপমেন্ট প্রক্রিয়াকে উল্লেখযোগ্যভাবে সহজ করে তোলে। Two-way data binding এবং one-way data binding ব্যবহার করে আপনি UI এবং ডেটা মডেলকে সহজেই সিঙ্ক্রোনাইজ করতে পারেন, এবং অবজারভেশন সিস্টেম আপনাকে ডেটার পরিবর্তনগুলি সহজভাবে ট্র্যাক করতে সাহায্য করে।

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

Aurelia ডাটাবাইন্ডিং এর ধরন

Aurelia বিভিন্ন ধরনের ডাটাবাইন্ডিং অপশন সরবরাহ করে। প্রতিটি ডাটাবাইন্ডিং স্টাইল বা কৌশল ভিন্নভাবে কাজ করে এবং ডেভেলপারদের প্রয়োজন অনুযায়ী ব্যবহার করা যায়।

১. Two-Way Data Binding

Two-way data binding এর মাধ্যমে, আপনি UI এর পরিবর্তন এবং ডেটা মডেল উভয়ের মধ্যে একে অপরকে আপডেট করতে পারেন। এটি ডেভেলপারকে একটি সিঙ্ক্রোনাইজড অবস্থা প্রদান করে, যেখানে মডেল এবং ভিউ একে অপরের সাথে সিঙ্ক্রোনাইজ থাকে।

• উদাহরণস্বরূপ, একটি ইনপুট ফিল্ডে কিছু লেখা হলে তা স্বয়ংক্রিয়ভাবে viewModel-এ প্রেরিত হবে এবং vice versa।

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

export class App {
  name = 'Aurelia';
}

এখানে, ইনপুট ফিল্ডের value.bind="name" নির্দেশ করে যে, ইনপুট ফিল্ডের মান এবং name ভ্যারিয়েবলটি একে অপরের সাথে সংযুক্ত থাকবে।

২. One-Way Data Binding

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

• উদাহরণস্বরূপ:

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

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

এখানে, ${message} নির্দেশ করে যে message ভ্যারিয়েবলটি হেডিং এর মধ্যে প্রদর্শিত হবে, কিন্তু ইউআই থেকে এটি পরিবর্তিত হবে না।

৩. Event Binding

Aurelia ইভেন্ট হ্যান্ডলিংয়ের জন্য event binding সাপোর্ট করে, যা ব্যবহারকারীর ইন্টারঅ্যাকশন (যেমন ক্লিক, কিবোর্ড ইনপুট) এর মাধ্যমে মেথড কল করতে ব্যবহৃত হয়।

• উদাহরণস্বরূপ:

<template>
  <button click.delegate="showMessage()">Click me</button>
</template>

export class App {
  showMessage() {
    alert('Button clicked!');
  }
}

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

৪. Attribute Binding

Attribute Binding এর মাধ্যমে, আপনি HTML এলিমেন্টের অ্যাট্রিবিউট (যেমন disabled, src, href, ইত্যাদি) ডেটা মডেল দ্বারা নিয়ন্ত্রণ করতে পারেন।

• উদাহরণস্বরূপ:

<template>
  <button disabled.bind="isDisabled">Submit</button>
</template>

export class App {
  isDisabled = true;
}

এখানে, disabled.bind="isDisabled" নির্দেশ করে যে, isDisabled ভ্যারিয়েবলের মান অনুযায়ী বাটনটি সক্রিয় বা নিষ্ক্রিয় হবে।

৫. Class Binding

Class Binding এর মাধ্যমে, আপনি একটি DOM এলিমেন্টের ক্লাস অ্যাট্রিবিউট ডেটার ভিত্তিতে নিয়ন্ত্রণ করতে পারেন।

• উদাহরণস্বরূপ:

<template>
  <div class.bind="isActive ? 'active' : 'inactive'">Hello World</div>
</template>

export class App {
  isActive = true;
}

এখানে, যদি isActive ভ্যারিয়েবলটির মান true হয়, তবে ক্লাস active যোগ হবে, আর যদি false হয়, তবে inactive ক্লাস যোগ হবে।

৬. Repeat Binding

Repeat Binding এর মাধ্যমে আপনি অ্যারে বা কোলেকশনের আইটেমগুলিকে একটি HTML এলিমেন্টের মাধ্যমে রিপিট করতে পারেন।

• উদাহরণস্বরূপ:

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

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

এখানে, repeat.for="item of items" নির্দেশ করে যে, items অ্যারের প্রতিটি উপাদান একটি <li> এলিমেন্টে প্রদর্শিত হবে।

Aurelia ডাটাবাইন্ডিং এর সুবিধাসমূহ

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

উপসংহার

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

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

প্রপার্টি অবজারভার (Property Observer) কী?

প্রপার্টি অবজারভার হল এমন একটি ফিচার যা একটি নির্দিষ্ট অবজেক্ট বা প্রপার্টির মান পর্যবেক্ষণ করে এবং যখন তার মান পরিবর্তন হয়, তখন তা অটোমেটিক্যালি UI তে প্রতিফলিত হয়। Aurelia এই ফিচারটি ডেটা বাইন্ডিংয়ের মাধ্যমে ইমপ্লিমেন্ট করেছে, যার মাধ্যমে কোনো প্রপার্টি পরিবর্তিত হলে UI তে তা স্বয়ংক্রিয়ভাবে আপডেট হয়।

Aurelia ডেটা বাইন্ডিং সিস্টেমটি getter/setter পদ্ধতির মাধ্যমে প্রপার্টির পরিবর্তন ট্র্যাক করে। যখন কোনো প্রপার্টির মান পরিবর্তিত হয়, তখন তা observable হয়ে যায় এবং UI তে পরিবর্তন প্রদর্শিত হয়।

পরিবর্তন ট্র্যাকিং (Change Tracking) কী?

পরিবর্তন ট্র্যাকিং হল একটি প্রক্রিয়া যার মাধ্যমে আপনি ডেটার মানে কোনো পরিবর্তন হলে তা ট্র্যাক করেন এবং এই পরিবর্তনগুলি UI তে প্রতিফলিত করেন। Aurelia ফ্রেমওয়ার্কে এটি dirty checking বা getter/setter পদ্ধতির মাধ্যমে সম্পন্ন হয়। যখন একটি ডেটা প্রপার্টি পরিবর্তিত হয়, তখন Aurelia তা ট্র্যাক করে এবং UI-এ সংশ্লিষ্ট অংশকে রেন্ডার করে।

Aurelia-তে change tracking কার্যকরভাবে ডেটা বাইন্ডিং সিস্টেমের মাধ্যমে কাজ করে, যা ডেটা মডেল এবং UI-র মধ্যে সিঙ্ক্রোনাইজেশন নিশ্চিত করে।

Aurelia তে প্রপার্টি অবজারভার এবং পরিবর্তন ট্র্যাকিং ব্যবহার

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

নিচে একটি উদাহরণ দেওয়া হলো:

উদাহরণ: প্রপার্টি অবজারভার এবং পরিবর্তন ট্র্যাকিং

// app.js (ভিউমডেল)
export class App {
  constructor() {
    this.name = 'Aurelia';  // এটি একটি observable প্রপার্টি
  }

  changeName() {
    this.name = 'Aurelia Framework';  // name প্রপার্টির মান পরিবর্তন হবে
  }
}

<!-- app.html (ভিউ টেমপ্লেট) -->
<template>
  <h1>Hello, ${name}!</h1>
  <button click.delegate="changeName()">Change Name</button>
</template>

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

1. প্রথমে, name প্রপার্টি "Aurelia" সেট করা হয়।
2. <h1> ট্যাগে ${name} দ্বারা এটি UI তে প্রদর্শিত হয়। অর্থাৎ, name প্রপার্টি UI এর সাথে বাইন্ড করা হয়েছে।
3. যখন বাটনে ক্লিক করা হবে, তখন changeName() মেথডটি কল হবে এবং name প্রপার্টির মান পরিবর্তন হবে।
4. Aurelia স্বয়ংক্রিয়ভাবে UI আপডেট করবে এবং "Aurelia Framework" নতুন মান হিসেবে প্রদর্শিত হবে।

এখানে Aurelia getter/setter এবং dirty checking ব্যবহার করে name প্রপার্টির পরিবর্তন ট্র্যাক করে, এবং UI তে তা রেন্ডার করা হয়।

Aurelia তে আরো উন্নত পরিবর্তন ট্র্যাকিং

Aurelia তে আরও উন্নত পরিবর্তন ট্র্যাকিং করার জন্য আপনি bindable ডেকোরেটর এবং Custom Elements ব্যবহার করতে পারেন। bindable ডেকোরেটর ব্যবহার করে আপনি custom components তে প্রপার্টি বাইন্ডিং এবং পরিবর্তন ট্র্যাকিং কনফিগার করতে পারেন।

উদাহরণ: bindable ডেকোরেটর ব্যবহার

// child.js (কাস্টম কম্পোনেন্ট)
import {bindable} from 'aurelia-framework';

export class Child {
  @bindable name;  // এই প্রপার্টি পরিবর্তন ট্র্যাক করা হবে
}

<!-- parent.html -->
<template>
  <child name.bind="parentName"></child>
  <button click.delegate="changeName()">Change Name</button>
</template>

// parent.js
export class Parent {
  parentName = 'Aurelia';

  changeName() {
    this.parentName = 'Aurelia Framework';  // parentName পরিবর্তন হবে
  }
}

এখানে, parentName প্রপার্টি bind করা হয়েছে child কম্পোনেন্টের name প্রপার্টির সাথে। যখন parentName পরিবর্তিত হবে, child কম্পোনেন্টে name প্রপার্টি অটোমেটিক্যালি আপডেট হবে।

উপসংহার

Aurelia-এর প্রপার্টি অবজারভার এবং পরিবর্তন ট্র্যাকিং সিস্টেম খুবই শক্তিশালী এবং সহজে ডেটার পরিবর্তন সিঙ্ক্রোনাইজ করতে সহায়তা করে। আপনি getter/setter বা dirty checking পদ্ধতি ব্যবহার করে সহজেই UI এবং ডেটা মডেলের মধ্যে সিঙ্ক্রোনাইজেশন পরিচালনা করতে পারেন। Aurelia তে ডেটা বাইন্ডিংয়ের মাধ্যমে এই প্রক্রিয়া খুবই স্বাভাবিক এবং সহজ হয়ে থাকে, যা ডেভেলপারদের জন্য কার্যকরী ও দক্ষ।

Aurelia একটি শক্তিশালী ডাটাবাইন্ডিং সিস্টেম প্রদান করে যা আপনার অ্যাপ্লিকেশনকে ডেটা মডেল এবং UI এর মধ্যে সমন্বয় করতে সাহায্য করে। এটি two-way data binding, one-way data binding এবং property binding সাপোর্ট করে। তবে, আপনি যদি কাস্টম ডাটাবাইন্ডিং বিহেভিয়ার তৈরি করতে চান, তবে Aurelia আপনাকে custom bindings এবং binding behaviors তৈরি করার সুবিধা দেয়।

এখানে কাস্টম ডাটাবাইন্ডিং বিহেভিয়ার (Custom Binding Behavior) তৈরি করার প্রক্রিয়া ব্যাখ্যা করা হলো।

কাস্টম ডাটাবাইন্ডিং বিহেভিয়ার তৈরি করা

Aurelia-তে কাস্টম ডাটাবাইন্ডিং বিহেভিয়ার (Behavior) তৈরি করার জন্য আপনাকে কিছু নির্দিষ্ট ধাপ অনুসরণ করতে হবে। Binding Behavior এবং Binding Command এর মধ্যে পার্থক্য হল, Behavior সাধারণত existing binding-এর আচরণ পরিবর্তন করে, যেখানে Command নতুনভাবে একটি নতুন binding তৈরি করে।

১. Binding Behavior কী?

Binding Behavior হল একটি কাস্টম বৈশিষ্ট্য যা পূর্বনির্ধারিত ডাটাবাইন্ডিং আচরণে একটি নতুন কার্যক্ষমতা যোগ করে। উদাহরণস্বরূপ, আপনি যদি একটি click ইভেন্টে debounce যুক্ত করতে চান, বা কোনও ভ্যালু পরিবর্তন হলে বিশেষ ধরনের ক্যালকুলেশন বা আউটপুট পরিবর্তন করতে চান, তবে আপনি কাস্টম Binding Behavior ব্যবহার করতে পারেন।

২. Custom Binding Behavior তৈরি করা

ধরা যাক, আমরা একটি কাস্টম uppercase বিহেভিয়ার তৈরি করতে চাই, যা ইনপুটের ভ্যালু পরিবর্তন হলে তা স্বয়ংক্রিয়ভাবে বড় হাতের অক্ষরে পরিণত করবে। এর জন্য নিম্নলিখিত ধাপগুলি অনুসরণ করা যেতে পারে:

স্টেপ ১: uppercase নামক একটি কাস্টম বিহেভিয়ার তৈরি করা

প্রথমে, একটি uppercase-binding-behavior.js ফাইল তৈরি করুন এবং এতে আপনার কাস্টম বিহেভিয়ার কোড লিখুন।

export class UppercaseBindingBehavior {
  bind(binding, source) {
    // যখন binding প্রথমবার bind হবে, তখন এই ফাংশন কল হবে
    binding.target.value = binding.target.value.toUpperCase();
    binding.target.addEventListener('input', () => {
      binding.target.value = binding.target.value.toUpperCase();
      binding.updateSource();
    });
  }

  unbind(binding, source) {
    // যখন binding unbind হবে, তখন এই ফাংশন কল হবে
    binding.target.removeEventListener('input');
  }
}

স্টেপ ২: বিহেভিয়ার ব্যবহার করা

এখন, এই কাস্টম বিহেভিয়ারটি আপনার app.html বা যেকোনো টেমপ্লেটে ব্যবহার করা যাবে। ধরুন আপনি একটি ইনপুট ফিল্ডে এই বিহেভিয়ার ব্যবহার করতে চান:

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

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

৩. Binding Behavior রেজিস্টার করা

কাস্টম বিহেভিয়ার ব্যবহারের জন্য আপনাকে এটি Aurelia Container-এ রেজিস্টার করতে হবে। এটি করার জন্য, main.js ফাইলে নিচের কোডটি যোগ করুন:

import {UppercaseBindingBehavior} from './uppercase-binding-behavior';

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

এভাবে, আপনি যেকোনো টেমপ্লেটে uppercase বিহেভিয়ার ব্যবহার করতে পারবেন।

৪. অতিরিক্ত কাস্টম বিহেভিয়ার তৈরি করা

Aurelia-তে কাস্টম বিহেভিয়ার তৈরি করা সহজ। আপনি যেকোনো ধরণের বিহেভিয়ার তৈরি করতে পারেন। যেমন:

• Debounce: ইনপুট পরিবর্তন হলে দ্রুত কয়েকবার একই কাজ না হয়ে একসাথে ইভেন্ট ট্রিগার করা।
• Focus: নির্দিষ্ট একটি এলিমেন্টে ফোকাস আনা।
• Format: নম্বর বা ডেটা ফরম্যাট করা।

এগুলির জন্য, আপনার একইভাবে bind এবং unbind ফাংশন তৈরি করতে হবে, যা প্রয়োজনীয় কার্যক্ষমতা যুক্ত করবে।

উপসংহার

Aurelia আপনাকে কাস্টম ডাটাবাইন্ডিং বিহেভিয়ার তৈরি করার মাধ্যমে আপনার অ্যাপ্লিকেশনে অতিরিক্ত কার্যক্ষমতা যোগ করার সুযোগ দেয়। এটি একটি খুবই শক্তিশালী বৈশিষ্ট্য যা আপনাকে UI এবং ডেটা ম্যানিপুলেশনকে আরও দক্ষ এবং গতিশীল করতে সাহায্য করে। কাস্টম বিহেভিয়ার তৈরির মাধ্যমে আপনি event listeners, value transformation এবং অন্যান্য অনেক ধরনের কাস্টম কার্যক্ষমতা যুক্ত করতে পারেন।

Aurelia একটি শক্তিশালী data binding সিস্টেম সরবরাহ করে যা HTML এবং JavaScript (বা TypeScript) এর মধ্যে ডেটা সিঙ্ক্রোনাইজেশন করতে সাহায্য করে। Aurelia এর বাইন্ডিং ডিরেক্টিভগুলি HTML টেমপ্লেটের সাথে JavaScript কোডের যোগাযোগে ব্যবহার করা হয়। এটি আপনাকে two-way data binding, event handling, attribute manipulation এবং অন্যান্য অনেক ফিচার ব্যবহার করার সুযোগ দেয়।

Aurelia-এর বাইন্ডিং ডিরেক্টিভগুলি মূলত attributes হিসাবে কাজ করে, এবং এগুলি টেমপ্লেটে ডেটা ও UI এর মধ্যে সম্পর্ক তৈরি করে।

বাইন্ডিং ডিরেক্টিভসের ধরন

Aurelia তে প্রধানত দুটি ধরনের বাইন্ডিং ডিরেক্টিভ ব্যবহৃত হয়:

• Property Binding (প্রপার্টি বাইন্ডিং)
• Event Binding (ইভেন্ট বাইন্ডিং)

১. Property Binding (প্রপার্টি বাইন্ডিং)

Property Binding ডিরেক্টিভের মাধ্যমে আপনি অ্যাপ্লিকেশনের ডেটাকে HTML এলিমেন্টের প্রপার্টির সাথে বাইন্ড করতে পারেন। এটি ব্যবহার করার জন্য, bind ডিরেক্টিভ ব্যবহার করতে হয়।

উদাহরণ:

<template>
  <input value.bind="message">
  <p>${message}</p>
</template>

এখানে:

• value.bind="message": এই ডিরেক্টিভটি <input> এলিমেন্টের value প্রপার্টিকে message নামক ভেরিয়েবলের সাথে বাইন্ড করে।
• <p>${message}</p>: message ভেরিয়েবলের মান প্যারাগ্রাফে প্রদর্শন করা হয়।

এটি two-way data binding কার্যকর করে, যার মানে হলো, আপনি ইনপুট ফিল্ডে যেকোনো পরিবর্তন করলে তা message ভেরিয়েবলে প্রতিফলিত হবে, এবং এর বিপরীতও ঘটবে।

২. Event Binding (ইভেন্ট বাইন্ডিং)

Event Binding ডিরেক্টিভের মাধ্যমে আপনি HTML ইভেন্টগুলিকে জাভাস্ক্রিপ্ট ফাংশনের সাথে বাইন্ড করতে পারেন। এটি করার জন্য trigger.delegate বা event.delegate ব্যবহার করা হয়।

উদাহরণ:

<template>
  <button click.delegate="greet()">Click Me</button>
</template>

এখানে:

• click.delegate="greet()": এটি বোতামটির click ইভেন্টকে greet() মেথডের সাথে বাইন্ড করে।
• greet() মেথডটি আপনার জাভাস্ক্রিপ্ট ক্লাসে সংজ্ঞায়িত থাকতে হবে।

অথবা, আপনি ইভেন্টের নামের পরিবর্তে trigger বা event ডিরেক্টিভ ব্যবহার করতে পারেন:

<template>
  <button trigger="click" click.delegate="greet()">Click Me</button>
</template>

এই উদাহরণে, বোতাম ক্লিক করলে greet() মেথডটি কল হবে।

৩. Two-Way Data Binding (দ্বি-দিশামূলক ডেটা বাইন্ডিং)

Aurelia তে two-way data binding এর জন্য .bind ডিরেক্টিভ ব্যবহৃত হয়। এটি model-to-view এবং view-to-model ডেটা সিঙ্ক্রোনাইজেশন সক্ষম করে।

উদাহরণ:

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

এখানে:

• value.bind="name": ইনপুট ফিল্ডের মান name ভেরিয়েবলের সাথে বাইন্ড করা হয়েছে। এতে ইনপুট ফিল্ডে যেকোনো পরিবর্তন name ভেরিয়েবলে সিঙ্ক্রোনাইজ হবে এবং এর বিপরীতও ঘটবে।

৪. Conditionals (শর্তসাপেক্ষ ডিরেক্টিভস)

Aurelia তে conditionals বা শর্তসাপেক্ষ বাইন্ডিংয়ের জন্য if, else, repeat এবং show ডিরেক্টিভ ব্যবহৃত হয়।

if ডিরেক্টিভ:

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

এখানে:

• if.bind="isVisible": এই ডিরেক্টিভটি isVisible ভেরিয়েবলের মান অনুযায়ী এলিমেন্টটি প্রদর্শন করবে।

else ডিরেক্টিভ:

<template>
  <div if.bind="isVisible">This is visible</div>
  <div else>Nothing to show</div>
</template>

এখানে:

• যদি isVisible ভেরিয়েবল false হয়, তবে else ব্লকটি প্রদর্শিত হবে।

৫. Repeat Binding (রিপিট বাইন্ডিং)

Repeat Binding ব্যবহার করে আপনি একটি তালিকা বা অ্যারে থেকে একাধিক এলিমেন্ট তৈরি করতে পারেন। এটি একটি লুপের মতো কাজ করে যা একটি নির্দিষ্ট কন্টেইনারের মধ্যে আইটেম পুনরাবৃত্তি করে।

উদাহরণ:

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

এখানে:

• repeat.for="item of items": এটি items অ্যারের প্রতিটি উপাদানকে <li> এলিমেন্টে বাইন্ড করে।
• যখন items অ্যারে পরিবর্তিত হবে, তখন তা UI তে রিফ্রেশ হবে।

৬. Class Binding (ক্লাস বাইন্ডিং)

Aurelia তে আপনি ক্লাস বাইন্ডিং এর মাধ্যমে CSS ক্লাস যুক্ত বা মুছে ফেলতে পারেন। এটি করতে class.bind ডিরেক্টিভ ব্যবহার হয়।

উদাহরণ:

<template>
  <div class.bind="isActive ? 'active' : 'inactive'">Status</div>
</template>

এখানে:

• class.bind="isActive ? 'active' : 'inactive'": এটি isActive ভেরিয়েবলের মান অনুযায়ী active বা inactive ক্লাস অ্যাপ্লাই করবে।

৭. Attribute Binding (অ্যাট্রিবিউট বাইন্ডিং)

Aurelia তে attribute binding এর মাধ্যমে HTML এলিমেন্টের অ্যাট্রিবিউটকে বাইন্ড করা হয়।

উদাহরণ:

<template>
  <button disabled.bind="isDisabled">Click Me</button>
</template>

এখানে:

• disabled.bind="isDisabled": এটি isDisabled ভেরিয়েবলের মান অনুযায়ী disabled অ্যাট্রিবিউট যুক্ত বা সরিয়ে দেবে।

উপসংহার

Aurelia তে বাইন্ডিং ডিরেক্টিভগুলি HTML টেমপ্লেট এবং জাভাস্ক্রিপ্ট (বা টাইপস্ক্রিপ্ট) এর মধ্যে সম্পর্ক তৈরি করতে ব্যবহৃত হয়। এই ডিরেক্টিভগুলির মাধ্যমে আপনি data binding, event handling, conditionals, repetition, এবং attribute manipulation করতে পারেন। Aurelia এর বাইন্ডিং সিস্টেম খুবই শক্তিশালী এবং ব্যবহারকারী-বান্ধব, যা আপনার ওয়েব অ্যাপ্লিকেশন উন্নয়নের কাজকে দ্রুত এবং সহজ করে তোলে।