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
| Binding Type | Description | Example |
|---|---|---|
| One-way Data Binding | মডেল থেকে ভিউতে ডেটা প্রবাহিত হয়। ভিউ থেকে মডেল পরিবর্তন করা সম্ভব নয়। | <p>${message}</p> |
| Two-way Data Binding | মডেল এবং ভিউ একে অপরকে আপডেট করতে পারে। ব্যবহারকারীর ইনপুট এবং মডেল উভয়েই সিঙ্ক্রোনাইজড থাকে। | <input value.bind="message"> |
| String Interpolation | সরাসরি মডেল ডেটা টেমপ্লেটে ইন্টারপোলেট করা হয়। এটি one-way data binding এর মত কাজ করে। | <h1>${message}</h1> |
উপসংহার
Aurelia ডাটা বাইন্ডিং ব্যবস্থার মাধ্যমে মডেল এবং ভিউয়ের মধ্যে ডেটার সিঙ্ক্রোনাইজেশন অত্যন্ত সহজ হয়। One-way, Two-way, এবং String Interpolation এর মাধ্যমে আপনি বিভিন্ন পরিস্থিতিতে সহজে ডেটা সিঙ্ক্রোনাইজ করতে পারেন এবং আপনার অ্যাপ্লিকেশনের কার্যকারিতা বাড়াতে পারেন।
Read more
