Observable Arrays ব্যবহার করা

KnockoutJS তে Observable Arrays একটি শক্তিশালী ফিচার, যা ডেটার তালিকা (অথবা অ্যারে) এবং UI এর মধ্যে two-way data binding করতে সাহায্য করে। এটি আপনাকে এমন অ্যারে তৈরি করতে দেয় যা UI-তে ডেটা পরিবর্তন হলে স্বয়ংক্রিয়ভাবে আপডেট হয়ে যায় এবং UI থেকে কোনো পরিবর্তন হলে তা ডেটা মডেলেও প্রতিফলিত হয়। Observable Arrays সাধারণত ব্যবহার হয়, যখন আপনি ডাইনামিক ডেটার সাথে কাজ করছেন, যেমন: তালিকা, টেবিল বা লিস্ট আইটেম যেখানে একাধিক আইটেম যোগ/অপসারণ করা হয়।

KnockoutJS তে Observable Arrays ব্যবহার করার ধারণা

KnockoutJS তে observable array হল এমন একটি অ্যারে, যার মধ্যে থাকা প্রতিটি আইটেম একটি observable হিসাবে ট্র্যাক করা হয়। এর মানে হল, যখন আপনি অ্যারেতে কোনো আইটেম যোগ করেন বা অপসারণ করেন, তখন UI স্বয়ংক্রিয়ভাবে আপডেট হয়ে যায়।

Observable Arrays কীভাবে কাজ করে?

KnockoutJS তে observable array তৈরি করতে ko.observableArray() ফাংশন ব্যবহার করা হয়। এটি একটি বিশেষ টাইপের observable যা array এর মান ট্র্যাক করে এবং যখন অ্যারের কোনো আইটেম পরিবর্তিত হয়, UI তাও আপডেট হয়।

Observable Array এর ব্যবহার:

1. Observable Array তৈরি করা

KnockoutJS তে observable array তৈরি করার জন্য ko.observableArray() ফাংশন ব্যবহার করতে হবে।

Example:

// Observable Array তৈরি
var fruits = ko.observableArray(['Apple', 'Banana', 'Orange']);

// এটির মান পরীক্ষা করা
console.log(fruits());  // ["Apple", "Banana", "Orange"]

এখানে, fruits একটি observable array যা Apple, Banana, এবং Orange আইটেম ধারণ করে। আপনি fruits() ব্যবহার করে এটি রিটার্ন করতে পারেন।

2. Observable Array তে আইটেম যোগ করা বা অপসারণ করা

KnockoutJS তে observable array তে নতুন আইটেম যোগ করার জন্য push(), unshift(), এবং আইটেম অপসারণ করার জন্য pop(), shift() ব্যবহার করা হয়।

Example:

// Observable array তে নতুন আইটেম যোগ করা
fruits.push('Grapes');

// Observable array তে আইটেম অপসারণ করা
fruits.pop();  // Removes 'Grapes'

// নতুন মান চেক করা
console.log(fruits());  // ["Apple", "Banana", "Orange"]

এখানে:

• push() একটি নতুন আইটেম অ্যারের শেষে যোগ করবে।
• pop() অ্যারের শেষ থেকে আইটেমটি অপসারণ করবে।

3. Observable Array তে ইন্টারঅ্যাকশন করা (UI তে Binding)

KnockoutJS তে observable arrays কে HTML উপাদানগুলোর সাথে বাইন্ড করতে data-bind ব্যবহার করা হয়।

Example:

<ul data-bind="foreach: fruits">
    <li data-bind="text: $data"></li>
</ul>

<script>
    var viewModel = {
        fruits: ko.observableArray(['Apple', 'Banana', 'Orange'])
    };
    ko.applyBindings(viewModel);
</script>

এখানে:

• data-bind="foreach: fruits" নির্দেশ করে যে fruits অ্যারেটি ul ট্যাগের মধ্যে প্রতিটি আইটেম হিসেবে প্রদর্শিত হবে।
• text: $data নির্দেশ করে যে প্রতি আইটেমের মান টেক্সট হিসেবে প্রদর্শিত হবে।

এটি একটি unordered list (UL) তৈরি করবে যেখানে fruits অ্যারে এর সব আইটেম প্রদর্শিত হবে।

4. Observable Array তে অন্যান্য মেথড ব্যবহার করা

KnockoutJS এর observable array তে কিছু আরেকটি গুরুত্বপূর্ণ মেথড রয়েছে, যেগুলো দিয়ে আপনি ডেটা ম্যানিপুলেট করতে পারেন, যেমন remove(), removeAll(), replace() ইত্যাদি।

Example:

// আইটেম মুছে ফেলা
fruits.remove('Banana');

// সব আইটেম মুছে ফেলা
fruits.removeAll();

// আইটেম প্রতিস্থাপন করা
fruits.replace('Apple', 'Pineapple');

// নতুন মান চেক করা
console.log(fruits());  // ["Pineapple", "Orange"]

এখানে:

• remove() ফাংশন ব্যবহার করে আপনি নির্দিষ্ট আইটেম মুছে ফেলতে পারেন।
• removeAll() সব আইটেম মুছে ফেলে।
• replace() ফাংশন ব্যবহার করে একটি আইটেম অন্য একটি আইটেম দ্বারা প্রতিস্থাপন করা হয়।

5. KnockoutJS এর Observable Array তে Computed Observables

Computed observables ব্যবহার করে আপনি একটি observable array এর উপর নির্ভরশীল মান তৈরি করতে পারেন। এটি আপনার অ্যারে পরিবর্তিত হলে স্বয়ংক্রিয়ভাবে আপডেট হয়ে যায়।

Example:

var fruits = ko.observableArray(['Apple', 'Banana', 'Orange']);

var totalFruits = ko.computed(function() {
    return fruits().length;  // fruits array এর মোট আইটেম গুনে সাইজ
});

console.log(totalFruits());  // 3
fruits.push('Grapes');
console.log(totalFruits());  // 4

এখানে:

• ko.computed() ফাংশন ব্যবহার করে আমরা totalFruits নামক একটি computed observable তৈরি করেছি, যা fruits() এর উপর নির্ভরশীল এবং যখন fruits পরিবর্তিত হয়, তখন এটি আপডেট হয়।

6. Observable Array তে Filter ব্যবহার করা

ko.computed() এর সাহায্যে আপনি observable array এর মধ্যে নির্দিষ্ট শর্তের ভিত্তিতে ফিল্টারও করতে পারেন।

Example:

var fruits = ko.observableArray(['Apple', 'Banana', 'Orange', 'Grapes']);

var filteredFruits = ko.computed(function() {
    return ko.utils.arrayFilter(fruits(), function(fruit) {
        return fruit.length > 5;  // শুধু ৫টি বা তার বেশি অক্ষরের ফল ফিল্টার করা
    });
});

console.log(filteredFruits());  // ["Banana", "Orange"]

এখানে:

• ko.utils.arrayFilter() ফাংশন ব্যবহার করে আমরা অ্যারেটির উপর ফিল্টার প্রয়োগ করেছি এবং শুধু সেই আইটেম গুলোকে নির্বাচন করেছি, যার নাম ৫টি বা তার বেশি অক্ষরের।

সারাংশ:

• KnockoutJS তে Observable Arrays ব্যবহার করা যায় ডেটার তালিকা এবং UI এর মধ্যে দুই-মুখী ডেটা বাইন্ডিং বাস্তবায়ন করতে।
• ko.observableArray() দিয়ে একটি observable array তৈরি করা হয়, যার মধ্যে push(), pop(), remove(), removeAll() ইত্যাদি মেথড ব্যবহার করে ডেটা পরিচালনা করা হয়।
• foreach এবং text বাইন্ডিং ব্যবহার করে observable array এর আইটেম HTML উপাদানগুলোর সাথে বাইন্ড করা হয়।
• computed ব্যবহার করে আপনি observable array এর উপর নির্ভরশীল নতুন মান তৈরি করতে পারেন।
• ko.utils.arrayFilter() ব্যবহার করে অ্যারে ফিল্টার করা যায়।

KnockoutJS তে observable arrays এর সাহায্যে আপনি ডাইনামিক এবং প্রতিক্রিয়াশীল ওয়েব অ্যাপ্লিকেশন তৈরি করতে পারেন, যেখানে UI এবং ডেটার মধ্যে স্বয়ংক্রিয় সিঙ্ক্রোনাইজেশন হয়।