KnockoutJS এ Computed Observables হল এমন একটি বিশেষ ধরনের observable যা অন্য observables এর উপর ভিত্তি করে মান গণনা করে এবং যখন ঐ observables পরিবর্তিত হয়, তখন এটি স্বয়ংক্রিয়ভাবে আপডেট হয়। Computed observables একটি read-only সত্তা যা view-model এ two-way binding সরবরাহ করতে সহায়তা করে, এবং UI তে রিয়েল-টাইম ডেটা আপডেট প্রদান করে।
Computed Observables কী?
Computed observables হল একটি বিশেষ ধরনের observable যা ডেটার উপর ভিত্তি করে একটি হিসাবিত মান বা ডাইনামিক ভ্যালু রিটার্ন করে। এটি অন্যান্য observables এর উপর নির্ভরশীল থাকে এবং সেই observables পরিবর্তিত হলে, এটি স্বয়ংক্রিয়ভাবে আপডেট হয়ে যায়।
KnockoutJS তে, computed observables আপনাকে সেইসব ডেটা তৈরি করতে সহায়তা করে, যা অন্য observables থেকে ডাইনামিকভাবে গণনা করা হয়, এবং UI তে তাত্ক্ষণিকভাবে পরিবর্তন প্রতিফলিত হয়।
Computed Observables কিভাবে কাজ করে?
যখন আপনি একটি computed observable তৈরি করেন, এটি অন্য observables বা মেথডের মানের উপর ভিত্তি করে একটি মান গণনা করে। যখন সেই observables এর মান পরিবর্তিত হয়, তখন computed observable এর মানও আপডেট হয়। এটি KnockoutJS এর dependency tracking ফিচারের মাধ্যমে কাজ করে, যা observables এর মধ্যে পরিবর্তন সনাক্ত করে এবং স্বয়ংক্রিয়ভাবে প্রতিক্রিয়া জানায়।
KnockoutJS তে Computed Observables তৈরি করার ধাপ:
1. Simple Computed Observable Example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>KnockoutJS Computed Observable Example</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.5.1/knockout-min.js"></script>
</head>
<body>
<h1>Full Name: <span data-bind="text: fullName"></span></h1>
<input type="text" data-bind="value: firstName" placeholder="First Name">
<input type="text" data-bind="value: lastName" placeholder="Last Name">
<script>
function AppViewModel() {
// Observables
this.firstName = ko.observable("John");
this.lastName = ko.observable("Doe");
// Computed observable
this.fullName = ko.computed(function() {
return this.firstName() + " " + this.lastName();
}, this);
}
// Activating KnockoutJS bindings
ko.applyBindings(new AppViewModel());
</script>
</body>
</html>
Explanation:
- এখানে,
firstNameএবংlastNameহল observable ডেটা, এবংfullNameহল একটি computed observable যাfirstNameএবংlastNameএর মানের উপর ভিত্তি করে পূর্ণ নাম তৈরি করে। - যখন firstName বা lastName পরিবর্তিত হবে, তখন fullName স্বয়ংক্রিয়ভাবে আপডেট হয়ে যাবে।
2. Computed Observable with Dependencies:
একইভাবে, আপনি আরো জটিল ডিপেন্ডেন্সি এবং লজিকের সাথে computed observables তৈরি করতে পারেন।
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>KnockoutJS Computed Observable Example</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.5.1/knockout-min.js"></script>
</head>
<body>
<h2>Total Price: $<span data-bind="text: totalPrice"></span></h2>
<label>Price:</label>
<input type="number" data-bind="value: price, valueUpdate: 'input'" />
<label>Quantity:</label>
<input type="number" data-bind="value: quantity, valueUpdate: 'input'" />
<script>
function AppViewModel() {
this.price = ko.observable(10); // Price observable
this.quantity = ko.observable(1); // Quantity observable
// Computed observable to calculate total price
this.totalPrice = ko.computed(function() {
return (this.price() * this.quantity()).toFixed(2); // Calculate total price
}, this);
}
// Activating KnockoutJS bindings
ko.applyBindings(new AppViewModel());
</script>
</body>
</html>
Explanation:
- এখানে price এবং quantity দুটি observable ডেটা, এবং
totalPriceএকটি computed observable যা price এবং quantity এর মানের উপর ভিত্তি করে মোট মূল্য (total price) গণনা করে। - যখন ব্যবহারকারী price বা quantity পরিবর্তন করবে, তখন totalPrice এর মান স্বয়ংক্রিয়ভাবে আপডেট হবে।
Computed Observables এর সুবিধা:
- Dynamic Calculation:
- Computed observables আপনাকে dynamic calculation করতে দেয়, যেখানে ডেটার মান পরিবর্তিত হলে স্বয়ংক্রিয়ভাবে নির্ধারিত মান পরিবর্তিত হয়।
- No Manual Updates:
- আপনি কোন বিশেষ লজিক বা কোড লিখে computed observable এর মান আপডেট করতে হয় না। KnockoutJS নিজে সব কিছু ট্র্যাক করে এবং প্রয়োজনীয় আপডেট করে।
- Efficiency:
- Computed observables শুধু তখনই recompute হয় যখন তাদের ডিপেন্ডেন্ট observables পরিবর্তিত হয়, ফলে এটি কার্যকরী এবং দ্রুত।
- Cleaner Code:
- এটি আপনার কোডকে পরিষ্কার এবং সহজ করে তোলে কারণ আপনি জটিল ক্যালকুলেশন এবং ভ্যালু এক্সপ্রেশনগুলোকে ViewModel এর মধ্যে পরিচালনা করতে পারেন।
- Read-only:
- Computed observables সাধারণত read-only থাকে, অর্থাৎ আপনি সরাসরি এর মান পরিবর্তন করতে পারবেন না। এটি UI updates এবং business logic এর মধ্যে একটি পরিষ্কার সীমানা তৈরি করে।
Computed Observables এর অন্যান্য ব্যবহার:
- Filtering Data: আপনি
computed observablesব্যবহার করে একটি ডাটা সেট ফিল্টার করতে পারেন যা ব্যবহারকারীর ইনপুটের উপর ভিত্তি করে ডেটা পরিবর্তন করবে। - Aggregating Data: আপনি বিভিন্ন ডেটার উপর ভিত্তি করে যোগফল, গড় বা অন্যান্য সমষ্টি ক্যালকুলেট করতে computed observables ব্যবহার করতে পারেন।
- Form Validation: বিভিন্ন ইনপুট ফিল্ডের ভিত্তিতে ডাইনামিকভাবে ফর্মের ভ্যালিডেশন স্ট্যাটাস চেক করতে computed observables ব্যবহার করা যেতে পারে।
KnockoutJS তে Computed Observables হল একটি শক্তিশালী ফিচার যা Model-View-ViewModel (MVVM) আর্কিটেকচারে কার্যকরী ডেটা ফ্লো নিশ্চিত করতে সহায়তা করে। এটি ডাইনামিকভাবে ক্যালকুলেটেড ডেটা তৈরি করতে, এবং observables এর উপর নির্ভরশীল ডেটা দেখাতে ব্যবহৃত হয়। এটি কোডকে সহজ, পরিষ্কার, এবং রক্ষণাবেক্ষণযোগ্য রাখে এবং ডেটা পরিবর্তিত হলে UI তে স্বয়ংক্রিয়ভাবে পরিবর্তন আনে। Computed observables ব্যবহার করে আপনি আরো কার্যকরী, রিয়েল-টাইম এবং ইন্টারঅ্যাকটিভ অ্যাপ্লিকেশন তৈরি করতে পারেন।
Read more
