KnockoutJS একটি জনপ্রিয় JavaScript লাইব্রেরি যা Two-way Data Binding এর সুবিধা প্রদান করে। Two-way Data Binding একটি প্রক্রিয়া যেখানে Model এবং View একে অপরের সাথে সিঙ্ক্রোনাইজ থাকে, অর্থাৎ যখন Model পরিবর্তিত হয়, তখন View অটোমেটিক্যালি আপডেট হয় এবং vice-versa। KnockoutJS তে এই কার্যকারিতা সরাসরি observables এবং data-binding এর মাধ্যমে অর্জিত হয়।
Two-way Data Binding in KnockoutJS
KnockoutJS তে Two-way Data Binding সরাসরি observable ব্যবহার করে করা হয়, যেখানে Model একটি observable হয় এবং View সেই observable এর মান দেখায় বা তার সাথে যুক্ত হয়। যখন Model এর মান পরিবর্তিত হয়, তখন View সেই পরিবর্তন স্বয়ংক্রিয়ভাবে দেখতে পায় এবং যদি View তে কোনো পরিবর্তন হয়, তা Model এ রিপ্লিকেট হয়।
How Two-way Data Binding Works in KnockoutJS
KnockoutJS তে দুইটি প্রধান উপাদান থাকে যা দুই দিকে ডেটা বাইন্ডিং করে:
- Observable: এটি এমন একটি ডেটা স্টোরেজ যেখানে ডেটা পরিবর্তিত হলে UI আপডেট হয়।
- Bindings: KnockoutJS এর
data-bindঅ্যাট্রিবিউট ব্যবহার করে ডেটাকে HTML elements এর সাথে যুক্ত করা হয়।
Two-way Data Binding Example
এখানে একটি সহজ উদাহরণ দেওয়া হচ্ছে যেখানে একটি ইনপুট ফিল্ড এবং একটি টেক্সট স্প্যানের মাধ্যমে টেক্সট প্রর্দশিত হচ্ছে। এই উদাহরণে, আপনি যে টেক্সট ইনপুট ফিল্ডে টাইপ করবেন, তা স্বয়ংক্রিয়ভাবে অন্য জায়গায় প্রদর্শিত হবে (two-way data binding):
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>KnockoutJS Two-way Data Binding</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.5.1/knockout-min.js"></script>
</head>
<body>
<h2>KnockoutJS Two-way Data Binding</h2>
<label>Your Name:</label>
<input type="text" data-bind="value: name, valueUpdate: 'input'">
<h3>Hello, <span data-bind="text: name"></span>!</h3>
<script>
// ViewModel
function AppViewModel() {
this.name = ko.observable('John Doe'); // Observable that will hold the value
}
// Apply Knockout bindings to the page
ko.applyBindings(new AppViewModel());
</script>
</body>
</html>
Explanation of the Example:
- Model (ViewModel):
nameহলো একটি observable (পদার্থগতভাবে পর্যবেক্ষণযোগ্য ডেটা) যা ko.observable() ফাংশন দিয়ে তৈরি করা হয়েছে।- যেহেতু এটি একটি observable, এটি পরিবর্তন হলে তার সাথে যুক্ত View অটোমেটিক্যালি আপডেট হয়ে যাবে।
- View (HTML):
<input>:data-bind="value: name"দ্বারা ইনপুট ফিল্ডে ডেটা বাইন্ডিং করা হয়েছে। এর মান name observable এর সাথে যুক্ত রয়েছে।<span>:data-bind="text: name"দ্বারাnameএর মান span ট্যাগে প্রদর্শিত হচ্ছে।
- Data Binding:
- যেকোনো পরিবর্তন ইনপুট ফিল্ডে করলে তা observable
nameএ রিপ্লিকেট হবে এবং একইভাবে স্প্যান ট্যাগে প্রদর্শিত হবে। valueUpdate: 'input': এটি নিশ্চিত করে যে ইনপুট ফিল্ডে টাইপ করার সাথে সাথে মান পরিবর্তিত হবে, এবং UI তে তা আপডেট হবে।
- যেকোনো পরিবর্তন ইনপুট ফিল্ডে করলে তা observable
KnockoutJS তে Two-way Data Binding এর সুবিধা:
- Simpler Code:
- Two-way data binding ব্যবহারে আপনি আপনার কোডে ডেটা পরিবর্তনের জন্য অতিরিক্ত লজিক বা ইভেন্ট হ্যান্ডলার ব্যবহার করতে হবে না, কারণ KnockoutJS স্বয়ংক্রিয়ভাবে Model এবং View এর মধ্যে সিঙ্ক্রোনাইজেশন তৈরি করে।
- Real-time Updates:
- যখন Model এর মান পরিবর্তিত হয়, তখন তা UI তে স্বয়ংক্রিয়ভাবে পরিবর্তিত হয়ে যায়, যার ফলে ইউজার এক্সপেরিয়েন্স উন্নত হয় এবং ডেটা আপডেটের জন্য পেজ রিলোডের প্রয়োজন পড়ে না।
- Separation of Concerns:
- Model (JavaScript কোড) এবং View (HTML) এর মধ্যে পরিষ্কার পার্থক্য তৈরি হয়, যা কোডের মেইনটেনিবিলিটি উন্নত করে। ViewModel আপনার ডেটা এবং লজিক সঠিকভাবে ধারণ করে, এবং View শুধুমাত্র UI এর জন্য দায়ী থাকে।
Additional Features in KnockoutJS with Two-way Data Binding:
Observable Arrays:
- KnockoutJS তে আপনি observable arrays ব্যবহার করে তালিকার ডেটা প্রদর্শন করতে পারেন। যখন অ্যারের মধ্যে কোনো পরিবর্তন হয়, তখন UI স্বয়ংক্রিয়ভাবে আপডেট হয়।
function AppViewModel() { this.items = ko.observableArray(['Apple', 'Banana', 'Cherry']); } ko.applyBindings(new AppViewModel());HTML:
<ul data-bind="foreach: items"> <li data-bind="text: $data"></li> </ul>Computed Observables:
- Computed observables ব্যবহার করে আপনি একাধিক observables এর মানের উপর ভিত্তি করে নতুন ডেটা তৈরি করতে পারেন। এটি স্বয়ংক্রিয়ভাবে পরিবর্তিত হবে যখন তার নির্ভরশীল observables পরিবর্তিত হবে।
function AppViewModel() { this.firstName = ko.observable('John'); this.lastName = ko.observable('Doe'); this.fullName = ko.computed(function() { return this.firstName() + ' ' + this.lastName(); }, this); }HTML:
<div> Full Name: <span data-bind="text: fullName"></span> </div>
Two-way data binding KnockoutJS এর একটি শক্তিশালী বৈশিষ্ট্য যা ডেটা এবং UI এর মধ্যে সম্পর্ক স্থাপন করে। এটি observable এবং data-bind এর মাধ্যমে বাস্তবায়িত হয় এবং UI এবং JavaScript কোডের মধ্যে একে অপরের সাথে সিঙ্ক্রোনাইজেশন নিশ্চিত করে। KnockoutJS এর সাহায্যে আপনি সহজে ডাইনামিক এবং প্রতিক্রিয়া সম্পন্ন ওয়েব অ্যাপ্লিকেশন তৈরি করতে পারেন, যেখানে Model এবং View একে অপরের সাথে সিঙ্ক্রোনাইজ থাকে।
Read more
