ফর্ম ডাটাবাইন্ডিং

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

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

Aurelia ফর্ম ডাটাবাইন্ডিং কিভাবে কাজ করে

Aurelia ফ্রেমওয়ার্কে ডাটাবাইন্ডিং অত্যন্ত সহজ এবং শক্তিশালী। আমরা এটি নিম্নলিখিত প্রকারে ব্যবহার করতে পারি:

• Two-Way Binding: এটি ইউজারের ইনপুট এবং মডেলকে সিঙ্ক্রোনাইজ করে।
• One-Way Binding: এটি শুধুমাত্র মডেল থেকে ভিউ তে ডেটা পাঠায়।
• One-Time Binding: এটি শুধুমাত্র পেজ লোডের সময় একবার ডেটা পাঠায়।

১. টেক্সট ইনপুট ফিল্ডে ডাটাবাইন্ডিং

Aurelia এর two-way data binding ফিচার ব্যবহার করে, আপনি সহজেই ইনপুট ফিল্ডের মধ্যে ডেটা পাঠাতে এবং গ্রহণ করতে পারেন। এটি সাধারণত bind কনস্ট্রেন্ট ব্যবহার করে করা হয়।

উদাহরণ: টেক্সট ইনপুট ফিল্ডে ডাটাবাইন্ডিং

<template>
  <div>
    <label for="username">Username:</label>
    <input id="username" type="text" value.bind="username">
    <p>Hello, ${username}!</p>
  </div>
</template>

app.js:

export class App {
  username = '';  // ইনপুটের জন্য ডিফল্ট ভ্যালু
}

এখানে value.bind="username" ব্যবহার করা হয়েছে যা username ভ্যারিয়েবলের সাথে ইনপুট ফিল্ডটিকে বাইন্ড করে। যখন ইউজার ইনপুট করবে, তখন এটি username ভ্যারিয়েবলে পরিবর্তন হবে এবং সেটি ভিউতে দেখানো হবে।

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

Aurelia চেকবক্সের ক্ষেত্রে two-way binding সিস্টেম ব্যবহার করে। যখন চেকবক্সের ভ্যালু পরিবর্তন হয়, এটি সংশ্লিষ্ট মডেল বা ভেরিয়েবলে আপডেট হয়।

উদাহরণ: চেকবক্সে ডাটাবাইন্ডিং

<template>
  <div>
    <label for="agree">I agree to the terms and conditions</label>
    <input id="agree" type="checkbox" checked.bind="agreed">
    <p>${agreed ? 'Agreed' : 'Not Agreed'}</p>
  </div>
</template>

app.js:

export class App {
  agreed = false;  // চেকবক্সের ডিফল্ট স্টেট
}

এখানে, checked.bind="agreed" ব্যবহার করা হয়েছে, যা agreed ভ্যারিয়েবলের সাথে চেকবক্সটিকে বাইন্ড করে। চেকবক্সে ক্লিক করলে, ভ্যালু পরিবর্তিত হয়ে "Agreed" অথবা "Not Agreed" প্রদর্শিত হবে।

৩. রেডিও বাটনে ডাটাবাইন্ডিং

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

উদাহরণ: রেডিও বাটনে ডাটাবাইন্ডিং

<template>
  <div>
    <label>Choose your gender:</label>
    <label>
      <input type="radio" name="gender" value="male" checked.bind="gender === 'male'"> Male
    </label>
    <label>
      <input type="radio" name="gender" value="female" checked.bind="gender === 'female'"> Female
    </label>
    <p>You selected: ${gender}</p>
  </div>
</template>

app.js:

export class App {
  gender = '';  // রেডিও বাটনের ডিফল্ট ভ্যালু
}

এখানে checked.bind="gender === 'male'" এবং checked.bind="gender === 'female'" ব্যবহার করা হয়েছে। এটি ইউজার সিলেকশন অনুযায়ী gender ভ্যারিয়েবলকে আপডেট করবে।

৪. ড্রপডাউন মেনুতে ডাটাবাইন্ডিং

ড্রপডাউন মেনুতে ডাটাবাইন্ডিং করার জন্য, value.bind ব্যবহার করা হয়, যাতে ইউজারের সিলেক্ট করা অপশন ডেটা মডেল বা ভ্যারিয়েবলে আপডেট হয়।

উদাহরণ: ড্রপডাউন মেনুতে ডাটাবাইন্ডিং

<template>
  <div>
    <label for="fruit">Choose a fruit:</label>
    <select id="fruit" value.bind="selectedFruit">
      <option value="apple">Apple</option>
      <option value="banana">Banana</option>
      <option value="orange">Orange</option>
    </select>
    <p>You selected: ${selectedFruit}</p>
  </div>
</template>

app.js:

export class App {
  selectedFruit = '';  // ড্রপডাউন মেনুর ডিফল্ট ভ্যালু
}

এখানে, value.bind="selectedFruit" ব্যবহার করা হয়েছে। ইউজার যখন একটি ফ্রুট সিলেক্ট করবে, তখন selectedFruit ভ্যারিয়েবল আপডেট হবে এবং ভিউতে সিলেক্ট করা ফ্রুট প্রদর্শিত হবে।

৫. টেক্সট এরিয়াতে ডাটাবাইন্ডিং

Aurelia টেক্সট এরিয়া ইনপুট ফিল্ডে ডাটাবাইন্ডিং সাপোর্ট করে। এটি ইনপুটের পরিবর্তন এবং মডেলের মধ্যে সম্পর্ক স্থাপন করতে ব্যবহার হয়।

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

<template>
  <div>
    <label for="message">Your message:</label>
    <textarea id="message" value.bind="message"></textarea>
    <p>You wrote: ${message}</p>
  </div>
</template>

app.js:

export class App {
  message = '';  // টেক্সট এরিয়ার ডিফল্ট ভ্যালু
}

এখানে, value.bind="message" ব্যবহার করা হয়েছে, যা message ভ্যারিয়েবলের সাথে টেক্সট এরিয়াটিকে বাইন্ড করে।

৬. ফর্ম সাবমিশন

ফর্ম সাবমিশনের সময় ডাটাবাইন্ডিংয়ের মাধ্যমে ইউজারের ইনপুট ডেটা মডেলেও সংরক্ষণ করা হয় এবং এটি প্রক্রিয়াজাত করা যায়।

উদাহরণ: ফর্ম সাবমিশন

<template>
  <form submit.delegate="submitForm()">
    <label for="username">Username:</label>
    <input id="username" type="text" value.bind="username">
    <button type="submit">Submit</button>
  </form>
  <p>Your username: ${username}</p>
</template>

app.js:

export class App {
  username = '';

  submitForm() {
    alert(`Form submitted with username: ${this.username}`);
  }
}

এখানে, submit.delegate="submitForm()" ব্যবহার করা হয়েছে, যা ফর্ম সাবমিশনের সময় submitForm() ফাংশন কল করবে এবং ইউজারের ইনপুট ভ্যালু আউটপুট হিসেবে দেখাবে।

উপসংহার

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