Riot.js-এ Data Binding এর মাধ্যমে UI এবং ডেটার মধ্যে একটি সম্পর্ক তৈরি করা হয়। এটি ডেটার পরিবর্তনের মাধ্যমে UI-তে অটো আপডেট করতে সাহায্য করে। Riot.js-এ Two-way Data Binding এবং One-way Data Binding এই দুটি পদ্ধতি রয়েছে, যা ডেটা এবং UI-এর মধ্যে যোগাযোগ পরিচালনা করে।
1. One-way Data Binding (এক-দিকনির্দেশিত ডাটা বাইন্ডিং)
One-way Data Binding এ, ডেটা একটি উৎস থেকে UI তে প্রবাহিত হয়। এতে, UI থেকে ডেটায় কোনো পরিবর্তন স্বয়ংক্রিয়ভাবে প্রতিফলিত হয় না। যখন ডেটা পরিবর্তিত হয়, তখন UI সেই পরিবর্তনটি প্রতিফলিত করে। কিন্তু UI থেকে ডেটার দিকে কোনো পরিবর্তন করা সম্ভব নয়।
উদাহরণ:
<!-- One-way Data Binding Example -->
<my-component>
<h1>{opts.title}</h1> <!-- opts.title থেকে ডেটা বাইন্ড হবে -->
<p>{message}</p>
<script>
export default {
onMounted() {
this.message = 'Hello, World!';
}
}
</script>
</my-component>
এখানে, opts.title প্যারামিটারটি One-way Data Binding এর মাধ্যমে h1 ট্যাগে প্রদর্শিত হবে। এটি কেবলমাত্র ডেটা পরিবর্তন হলে UI তে রিফ্লেক্ট করবে।
2. Two-way Data Binding (দ্বি-দিকনির্দেশিত ডাটা বাইন্ডিং)
Two-way Data Binding এ, ডেটা এবং UI একে অপরের সাথে সরাসরি যুক্ত থাকে। এর মানে হল যে, যখন UI তে কিছু পরিবর্তন হবে, তখন সেই পরিবর্তন ডেটার মধ্যে প্রতিফলিত হবে এবং বিপরীতভাবে ডেটার পরিবর্তন UI তে দেখা যাবে। এটি সাধারণত ইউজার ইন্টারঅ্যাকশনের মাধ্যমে ঘটবে, যেমন ফর্মের ইনপুট।
উদাহরণ:
<!-- Two-way Data Binding Example -->
<my-input>
<input type="text" value={message} oninput={updateMessage}>
<p>Your message: {message}</p>
<script>
export default {
onMounted() {
this.message = 'Hello, Riot.js!';
},
updateMessage(e) {
this.message = e.target.value; // User input will update message
}
}
</script>
</my-input>
এখানে, Two-way Data Binding এর মাধ্যমে ইনপুট ফিল্ডের মান (input) পরিবর্তন হলে, এটি স্বয়ংক্রিয়ভাবে message স্টেটে আপডেট হবে এবং সেই পরিবর্তন UI তে (প্যারাগ্রাফে) দেখা যাবে। এবং message পরিবর্তিত হলে তা UI তে দেখানো হবে।
Two-way Data Binding এর প্রধান উপকারিতা:
- ইউজার ইন্টারঅ্যাকশন: ফর্ম ইনপুট বা টেক্সট এরিয়া ব্যবহার করার সময় ইউজারের ইনপুট ডেটা সাথে সাথে স্টেট আপডেট হবে।
- সহজ ডেটা ম্যানিপুলেশন: ইউজার ইন্টারঅ্যাকশনের মাধ্যমে ডেটা আপডেট এবং UI তে পরিবর্তন দেখতে সাহায্য করে।
One-way Data Binding vs Two-way Data Binding:
- One-way Data Binding: ডেটা শুধুমাত্র UI-তে প্রবাহিত হয়, ডেটার পরিবর্তন UI তে দেখাবে কিন্তু UI থেকে ডেটা পরিবর্তন করা যাবে না। এটি সাধারণত পারফরম্যান্সের জন্য উপকারী, কারণ ডেটার পরিবর্তন শুধু একদিকেই প্রবাহিত হয়।
- Two-way Data Binding: ডেটা এবং UI উভয় দিকেই পরিবর্তন সম্ভব, যাতে ইউজার ইন্টারঅ্যাকশনের মাধ্যমে ডেটা পরিবর্তন এবং UI আপডেট হতে থাকে। তবে এটি কিছু ক্ষেত্রে কমপ্লেক্স হতে পারে এবং পারফরম্যান্সে কিছু প্রভাব ফেলতে পারে, বিশেষত বড় অ্যাপ্লিকেশনগুলিতে।
Riot.js-এ Data Binding-এর ব্যবহার:
Riot.js সাধারণত One-way Data Binding ব্যবহার করে, তবে Two-way Data Binding-এর সুবিধা দিতে value এবং oninput ইভেন্ট হ্যান্ডলিংয়ের মাধ্যমে এটি সহজেই পরিচালনা করা সম্ভব।
সারাংশ:
- One-way Data Binding: ডেটা UI তে প্রবাহিত হয় এবং UI শুধুমাত্র ডেটার পরিবর্তন দেখায়।
- Two-way Data Binding: ডেটা এবং UI একে অপরের সাথে জড়িত থাকে এবং দুজনেই একে অপরকে আপডেট করে।
Read more
