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

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 এর বাইন্ডিং সিস্টেম খুবই শক্তিশালী এবং ব্যবহারকারী-বান্ধব, যা আপনার ওয়েব অ্যাপ্লিকেশন উন্নয়নের কাজকে দ্রুত এবং সহজ করে তোলে।