KnockoutJS তে Observable Arrays ব্যবহার করে আপনি ডায়নামিক তালিকা তৈরি করতে পারেন যা UI তে স্বয়ংক্রিয়ভাবে আপডেট হয় যখন ডেটা পরিবর্তিত হয়। এটি two-way data binding-এর সুবিধা দেয়, যেখানে আপনি observable arrays এর মধ্যে আইটেম যুক্ত বা মুছে ফেলার মাধ্যমে UI তে তালিকা স্বয়ংক্রিয়ভাবে আপডেট করতে পারেন।
Observable Arrays: কী এবং কেন ব্যবহার করা হয়?
Observable Arrays হল KnockoutJS এর একটি বিশেষ ধরনের observable, যা একটি অ্যারে ধারণ করে এবং সেই অ্যারের মধ্যে কোনো পরিবর্তন হলে তা UI তে স্বয়ংক্রিয়ভাবে প্রতিফলিত হয়। এটি ডায়নামিক তালিকা তৈরি এবং পরিচালনা করার জন্য খুবই কার্যকরী।
Observable Array তৈরি করা:
KnockoutJS তে observable array তৈরি করতে, আপনি ko.observableArray() ব্যবহার করেন। এই ফাংশনটি একটি অ্যারে তৈরি করে যা পরিবর্তন হলে UI-তে তা আপডেট হয়ে যায়।
Example (Observable Array Creation):
// Creating an observable array
var items = ko.observableArray(['Item 1', 'Item 2', 'Item 3']);
এখানে:
ko.observableArray()একটি observable array তৈরি করে যা প্রথমে `['Item 1', 'Item 2', 'Item 3'] অ্যারে ধারণ করে।
Observable Array ব্যবহার করে Dynamic List তৈরি করা:
KnockoutJS তে আপনি observable arrays ব্যবহার করে ডায়নামিক তালিকা তৈরি করতে পারেন এবং সেগুলি HTML টেবিল, লিস্ট অথবা অন্য কোনো উপাদানে বাইন্ড করতে পারেন।
HTML Example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>KnockoutJS Observable Array Example</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.5.1/knockout-min.js"></script>
</head>
<body>
<h2>Dynamic List Using Observable Array</h2>
<!-- Input for adding new item -->
<input type="text" data-bind="value: newItem" placeholder="Add new item">
<button data-bind="click: addItem">Add Item</button>
<!-- Displaying the list -->
<ul data-bind="foreach: items">
<li>
<span data-bind="text: $data"></span>
<button data-bind="click: $parent.removeItem">Remove</button>
</li>
</ul>
<script>
// ViewModel
function ViewModel() {
var self = this;
// Observable array for storing list items
self.items = ko.observableArray(['Item 1', 'Item 2', 'Item 3']);
// Observable for new item input
self.newItem = ko.observable('');
// Add item function
self.addItem = function() {
if (self.newItem()) {
self.items.push(self.newItem());
self.newItem(''); // Clear the input field
}
};
// Remove item function
self.removeItem = function(item) {
self.items.remove(item);
};
}
// Apply bindings
ko.applyBindings(new ViewModel());
</script>
</body>
</html>
Explaining the Example:
- Creating an Observable Array:
self.items = ko.observableArray(['Item 1', 'Item 2', 'Item 3']);- এখানে একটি observable array তৈরি করা হয়েছে যা প্রাথমিকভাবে তিনটি আইটেম ধারণ করছে।
- Adding Items:
self.addItem = function(): নতুন আইটেম যোগ করার জন্য একটি ফাংশন তৈরি করা হয়েছে।self.items.push(self.newItem())ব্যবহার করে নতুন আইটেমকে observable array তে যোগ করা হচ্ছে।self.newItem(''): নতুন আইটেম যোগ করার পর ইনপুট ফিল্ডটি খালি করা হয়।
- Removing Items:
self.removeItem = function(item): এখানে একটি ফাংশন তৈরি করা হয়েছে যা একটি আইটেম মুছে ফেলার জন্য observable array থেকেremove()ফাংশন ব্যবহার করে আইটেমটি সরিয়ে নেয়।
- Binding the List to HTML:
<ul data-bind="foreach: items">:foreachবাইন্ডিং ব্যবহার করেitemsobservable array তে থাকা সব আইটেমের জন্য একটি<li>তৈরি করা হচ্ছে।<span data-bind="text: $data"></span>: প্রতিটি আইটেমের নাম text বাইন্ডিং ব্যবহার করে UI তে দেখানো হচ্ছে।<button data-bind="click: $parent.removeItem">Remove</button>: প্রতিটি আইটেমের পাশে একটি Remove বাটন যোগ করা হয়েছে যা ক্লিক করলে ঐ আইটেমটি observable array থেকে সরিয়ে ফেলবে।
Key Functions of Observable Arrays:
push(): একটি নতুন আইটেম observable array তে যোগ করতে ব্যবহৃত হয়।items.push('New Item');pop(): শেষের আইটেমটি observable array থেকে সরাতে ব্যবহৃত হয়।items.pop();shift(): প্রথম আইটেমটি observable array থেকে সরাতে ব্যবহৃত হয়।items.shift();unshift(): নতুন আইটেম শুরুতে যোগ করতে ব্যবহৃত হয়।items.unshift('New Item at Start');remove(): নির্দিষ্ট আইটেম বা শর্ত অনুসারে observable array থেকে আইটেম মুছে ফেলা হয়।items.remove('Item 1');replace(): একটি আইটেমকে অন্য আইটেম দ্বারা প্রতিস্থাপন করতে ব্যবহৃত হয়।items.replace('Old Item', 'New Item');indexOf(): observable array তে কোনো আইটেমের ইনডেক্স খুঁজে পেতে ব্যবহৃত হয়।var index = items.indexOf('Item 1');
Advantages of Using Observable Arrays in KnockoutJS:
- Automatic UI Update: Observable arrays ব্যবহার করলে, যখনই অ্যারে তে কোন পরিবর্তন হয় (যেমন, আইটেম যোগ করা, মুছে ফেলা বা পরিবর্তন), UI স্বয়ংক্রিয়ভাবে আপডেট হয়ে যায়। এটি ডেভেলপারদের জন্য UI আপডেট করার জন্য অনেক সময় এবং পরিশ্রম বাঁচায়।
- Real-Time Interactivity: ইউজারের ইনপুট অনুসারে তালিকা স্বয়ংক্রিয়ভাবে পরিবর্তিত হতে থাকে, যার ফলে real-time interactivity নিশ্চিত হয়।
- Simplified DOM Manipulation: KnockoutJS observable arrays এর মাধ্যমে ডায়নামিক DOM ম্যানিপুলেশন সহজ করে তোলে, যেখানে অ্যারের মধ্যে কোনো পরিবর্তন UI তে সরাসরি দেখা যায়।
- Declarative Syntax: KnockoutJS তে ডায়নামিক তালিকা তৈরির সময় declarative binding ব্যবহার করা হয়, যার মাধ্যমে কোড সহজ এবং পরিষ্কার থাকে।
KnockoutJS তে observable arrays ব্যবহার করে আপনি খুব সহজে ডায়নামিক তালিকা তৈরি করতে পারেন যা UI তে স্বয়ংক্রিয়ভাবে আপডেট হয়। এটি two-way data binding, computed observables, এবং dependency tracking এর সুবিধা দিয়ে কোডকে আরো সহজ, দ্রুত এবং ইন্টারঅ্যাকটিভ করে তোলে। Observable arrays ব্যবহার করে, আপনি ব্যবহারকারী ইন্টারফেসকে আরও ডাইনামিক এবং ইন্টারঅ্যাকটিভ করতে পারেন।
Read more
