BackboneJS এ Collection একটি বিশেষ ধরনের অবজেক্ট যা একাধিক Model একসাথে গ্রুপ করে এবং তাদের সাথে বিভিন্ন অপারেশন (যেমন অ্যাড, রিমুভ, ফিল্টার) পরিচালনা করতে সাহায্য করে। এটি আপনাকে ডেটার একটি সংগঠিত গ্রুপ তৈরি করতে এবং সেই গ্রুপের ওপর কাজ করতে সক্ষম করে।
1. Collection এর ধারণা
BackboneJS-এ Collection একটি Model এর গ্রুপ, যার মধ্যে আপনি একাধিক মডেল যুক্ত করতে পারেন এবং তাদের উপর বিভিন্ন কার্যক্রম পরিচালনা করতে পারেন। প্রতিটি মডেল একটি পৃথক অবজেক্ট হিসেবে কাজ করে, তবে সেগুলি একটি নির্দিষ্ট Collection এর মধ্যে থাকা অবস্থায় সেগুলোর উপর সমন্বিতভাবে অপারেশন করা সম্ভব হয়।
2. Collection তৈরি করা
BackboneJS-এ Collection তৈরি করতে হলে প্রথমে আপনাকে একটি Collection ক্লাস ডিফাইন করতে হবে। এটি মূলত একটি মডেলগুলির তালিকা হিসেবে কাজ করবে।
// Model ডিফাইন করা
var Task = Backbone.Model.extend({
defaults: {
title: '',
completed: false
}
});
// Collection ডিফাইন করা
var TaskCollection = Backbone.Collection.extend({
model: Task
});
এখানে, TaskCollection হল একটি Collection যা Task মডেলগুলির একটি গ্রুপ ধারণ করবে।
3. Collection তৈরি ও মডেল যোগ করা
এখন আপনি একটি Collection তৈরি করে তাতে মডেল যোগ করতে পারেন।
// Collection তৈরি করা
var tasks = new TaskCollection();
// মডেল যোগ করা
tasks.add(new Task({ title: 'Learn Backbone.js', completed: false }));
tasks.add(new Task({ title: 'Build a project', completed: true }));
tasks.add(new Task({ title: 'Review code', completed: false }));
এখানে, tasks হল একটি TaskCollection এর ইনস্ট্যান্স এবং এতে তিনটি Task মডেল যোগ করা হয়েছে।
4. Collection এর ওপর অপারেশন
Collection এর মডেলগুলি অ্যাক্সেস করা
কোনো নির্দিষ্ট মডেল অ্যাক্সেস করতে আপনি at(index) মেথড ব্যবহার করতে পারেন, যেখানে index হল মডেলের পজিশন।
console.log(tasks.at(0).get('title')); // 'Learn Backbone.js'
Collection এর মডেল গুলি ফিল্টার করা
আপনি একটি Collection থেকে মডেল গুলি ফিল্টারও করতে পারেন। এর জন্য filter() মেথড ব্যবহার করা হয়।
// Completed মডেলগুলি ফিল্টার করা
var completedTasks = tasks.filter(function(task) {
return task.get('completed') === true;
});
console.log(completedTasks.length); // 1 (যেহেতু একটিই টাস্ক কমপ্লিটেড)
Collection এর সব মডেল মুছে ফেলা
আপনি একটি Collection থেকে সব মডেল মুছতে পারেন reset() মেথড ব্যবহার করে।
tasks.reset(); // সমস্ত মডেল মুছে ফেলবে
Collection থেকে মডেল রিমুভ করা
আপনি কোনো একটি নির্দিষ্ট মডেলকে Collection থেকে সরিয়ে ফেলতে পারেন remove() মেথড ব্যবহার করে।
// Task মডেল রিমুভ করা
tasks.remove(tasks.at(1)); // দ্বিতীয় টাস্কটি মুছে ফেলবে
5. Collection এর ইভেন্ট হ্যান্ডলিং
BackboneJS এর Collection ইভেন্ট সাপোর্ট করে, অর্থাৎ আপনি বিভিন্ন ইভেন্ট যেমন add, remove, change ইত্যাদি ফায়ার করতে পারেন এবং তাদের জন্য হ্যান্ডলার লিখতে পারেন। এটি আপনাকে ডেটার পরিবর্তন ট্র্যাক করতে এবং ইউজারের ইন্টারঅ্যাকশন এর সাথে সিঙ্ক্রোনাইজড হতে সাহায্য করে।
// Collection এ মডেল অ্যাড করার সময় ইভেন্ট লিসেন করা
tasks.on('add', function(task) {
console.log('New Task Added: ' + task.get('title'));
});
// নতুন টাস্ক অ্যাড করা
tasks.add(new Task({ title: 'Test Backbone Collection' }));
এখানে, যখন নতুন টাস্ক tasks কলে যোগ করা হবে, তখন add ইভেন্টটি ট্রিগার হবে এবং কনসোলে মেসেজ দেখাবে।
6. Collection এবং Server-Side Interaction
BackboneJS Collection এর মাধ্যমে আপনি server-side এর সাথে ইন্টারঅ্যাকশন করতে পারেন। এর জন্য fetch(), save(), এবং destroy() মেথড ব্যবহার করা হয়, যা Model এর মত কাজ করে।
fetch()
একটি Collection থেকে ডেটা ফেচ করার জন্য fetch() মেথড ব্যবহার করা হয়। এটি সাধারণত AJAX কলের মাধ্যমে সার্ভার থেকে ডেটা নিয়ে আসে।
tasks.fetch({
url: '/tasks', // সার্ভারের URL যেখানে ডেটা থাকবে
success: function(collection, response, options) {
console.log('Data fetched successfully');
},
error: function(collection, response, options) {
console.log('Error fetching data');
}
});
save()
যখন কোনো মডেল নতুনভাবে তৈরি হয় বা তার ডেটা পরিবর্তিত হয়, তখন তাকে সার্ভারে সেভ করার জন্য save() মেথড ব্যবহার করা হয়।
var newTask = new Task({ title: 'Write documentation', completed: false });
newTask.save();
destroy()
কোনো মডেলকে সার্ভার থেকে ডিলিট করতে destroy() মেথড ব্যবহার করা হয়।
tasks.at(0).destroy();
এটি প্রথম মডেলটিকে সার্ভার থেকে মুছে ফেলবে, যদি সার্ভারে destroy() মেথড কার্যকর থাকে।
7. Collection রেন্ডারিং
BackboneJS-এ Collection রেন্ডারিং করা সাধারণত ভিউ এর মাধ্যমে করা হয়। যখন আপনি একটি Collection তৈরি করেন, তখন এটি একটি View এর সাথে যুক্ত হয়ে তার সমস্ত মডেল রেন্ডার করতে পারে।
var TaskListView = Backbone.View.extend({
render: function() {
this.collection.each(function(task) {
var taskView = new TaskView({ model: task });
this.$el.append(taskView.render().el);
}, this);
return this;
}
});
এখানে TaskListView ভিউটি একটি Collection এর সব মডেল রেন্ডার করবে।
8. Collection এর ইন্টারফেস
BackboneJS এর Collection এর কিছু গুরুত্বপূর্ণ মেথড:
add(model): একটি নতুন মডেল অ্যাড করাremove(model): একটি মডেল রিমুভ করাreset([models]): সমস্ত মডেল রিসেট করাget(id): একটি মডেল অনুসন্ধান করা (ID বা attribute দিয়ে)filter(callback): মডেল ফিল্টার করাeach(callback): প্রতিটি মডেল এর জন্য একটি ফাংশন চালানো
সারাংশ
BackboneJS এর Collection একটি শক্তিশালী উপায় যা একাধিক Model পরিচালনা এবং তাদের ওপর বিভিন্ন অপারেশন করার সুবিধা প্রদান করে। Collection আপনাকে মডেল অ্যাড, রিমুভ, ফিল্টার, এবং সার্ভারের সাথে ডেটা ইন্টারঅ্যাকশন করতে সাহায্য করে। এটি ইউজার ইন্টারফেসের অংশ হিসেবে একাধিক ভিউ রেন্ডার এবং মডেলগুলোর পরিবর্তন ট্র্যাক করতে ব্যবহৃত হয়।
Read more
