BackboneJS এ Collection হল একটি ডেটা সেট বা একটি গ্রুপ, যা এক বা একাধিক মডেল (Model) ধারণ করে। Collection ব্যবহার করে আপনি মডেলগুলোর সাথে কাজ করতে পারেন, যেমন: ডেটা ফিল্টার করা, সাজানো, মডেল অ্যাড করা বা মডেল ডিলিট করা ইত্যাদি। Collection মডেলগুলোর একটি গ্রুপ হিসেবে কাজ করে এবং এটি ইভেন্ট হ্যান্ডলিং ও ডেটা বাইন্ডিংয়ের মাধ্যমে আরো শক্তিশালী হয়।
এখানে আপনি শিখবেন কীভাবে BackboneJS এর Collection এর Events এবং Data Binding ব্যবহার করবেন।
1. Collection তৈরি এবং মডেল যোগ করা
BackboneJS এর Collection তৈরি করতে হলে, প্রথমে একটি নতুন Collection ক্লাস তৈরি করতে হয়, যা Backbone.Collection থেকে এক্সটেন্ড হয়। তারপর আপনি এই Collection এ মডেল যোগ করতে পারেন এবং বিভিন্ন কাজ করতে পারেন।
Collection তৈরি এবং মডেল যোগ করার উদাহরণ:
// Book Model তৈরি করা
var Book = Backbone.Model.extend({
defaults: {
title: 'Unknown',
author: 'Unknown',
year: 2021
}
});
// Book Collection তৈরি করা
var BooksCollection = Backbone.Collection.extend({
model: Book // এখানে Book মডেলকে কলেকশনে সংযুক্ত করা হলো
});
// Collection তৈরি করা এবং মডেল যোগ করা
var myBooks = new BooksCollection([
{ title: 'BackboneJS for Beginners', author: 'John Doe', year: 2022 },
{ title: 'Advanced BackboneJS', author: 'Jane Doe', year: 2023 }
]);
// Collection এর length প্রিন্ট করা
console.log(myBooks.length); // Output: 2
এখানে BooksCollection একটি Collection তৈরি করেছে এবং এর মধ্যে দুইটি Book মডেল যোগ করা হয়েছে।
2. Collection এর Events
BackboneJS এ Collection এবং Model উভয়েই ইভেন্ট হ্যান্ডলিং সাপোর্ট করে। আপনি add, remove, reset, change ইত্যাদি ইভেন্টগুলি ব্যবহার করে বিভিন্ন ইভেন্ট ট্র্যাক করতে পারেন। এগুলোর মাধ্যমে আপনি Collection এর পরিবর্তনগুলি ট্র্যাক করতে পারবেন এবং প্রয়োজনীয় লজিক প্রয়োগ করতে পারবেন।
Collection এর Events এর উদাহরণ:
// Book Model তৈরি করা
var Book = Backbone.Model.extend({
defaults: {
title: 'Unknown',
author: 'Unknown',
year: 2021
}
});
// Book Collection তৈরি করা
var BooksCollection = Backbone.Collection.extend({
model: Book
});
// Collection তৈরি করা
var myBooks = new BooksCollection();
// add ইভেন্টের জন্য হ্যান্ডলার সেট করা
myBooks.on('add', function(book) {
console.log('New book added: ' + book.get('title'));
});
// remove ইভেন্টের জন্য হ্যান্ডলার সেট করা
myBooks.on('remove', function(book) {
console.log('Book removed: ' + book.get('title'));
});
// Collection এ মডেল যোগ করা
myBooks.add(new Book({ title: 'BackboneJS for Beginners', author: 'John Doe', year: 2022 }));
myBooks.add(new Book({ title: 'Advanced BackboneJS', author: 'Jane Doe', year: 2023 }));
// Collection থেকে মডেল রিমুভ করা
myBooks.remove(myBooks.at(0)); // প্রথম মডেলটি রিমুভ করা
এখানে add ইভেন্টের মাধ্যমে যখন নতুন মডেল যোগ হবে, তখন কনসোলে নতুন বইয়ের শিরোনাম দেখানো হবে এবং remove ইভেন্টের মাধ্যমে মডেল রিমুভ হলে কনসোলে মুছে ফেলা বইয়ের শিরোনাম দেখানো হবে।
3. Data Binding in Collection
BackboneJS তে ডেটা বাইন্ডিং সরাসরি built-in ভাবে করা হয় না, তবে আপনি Collection এবং Model এর মধ্যে ডেটা বাইন্ডিং এবং ইন্টারঅ্যাকশন পরিচালনা করতে পারেন। সাধারণত, View গুলোর মাধ্যমে ডেটা বাইন্ডিং করা হয়, যেখানে View মডেল বা কলেকশনের ডেটা দেখায় এবং পরিবর্তনের সময় View আপডেট হয়।
Collection এর Data Binding এর উদাহরণ:
// Book Model তৈরি করা
var Book = Backbone.Model.extend({
defaults: {
title: 'Unknown',
author: 'Unknown',
year: 2021
}
});
// Book Collection তৈরি করা
var BooksCollection = Backbone.Collection.extend({
model: Book
});
// Collection তৈরি করা
var myBooks = new BooksCollection([
{ title: 'BackboneJS for Beginners', author: 'John Doe', year: 2022 },
{ title: 'Advanced BackboneJS', author: 'Jane Doe', year: 2023 }
]);
// Collection এর ডেটা আপডেট করার জন্য method তৈরি করা
var BookListView = Backbone.View.extend({
el: '#bookList', // HTML এলিমেন্ট যেখানে ডেটা রেন্ডার হবে
initialize: function() {
this.listenTo(this.collection, 'add', this.render);
this.listenTo(this.collection, 'remove', this.render);
this.render();
},
render: function() {
var html = '';
this.collection.each(function(book) {
html += '<li>' + book.get('title') + ' by ' + book.get('author') + '</li>';
});
this.$el.html(html); // HTML তে ডেটা রেন্ডার করা
}
});
// View তৈরি এবং Collection এর সাথে বাইন্ডিং
var bookListView = new BookListView({ collection: myBooks });
এখানে, BookListView নামক View তৈরি করা হয়েছে, যা Collection এর ডেটা রেন্ডার করবে এবং add এবং remove ইভেন্টগুলির মাধ্যমে যখন নতুন মডেল যোগ বা মুছে ফেলা হবে, তখন তা স্বয়ংক্রিয়ভাবে View এ আপডেট হবে।
4. Collection এর Method এবং Utility Functions
BackboneJS এর Collection এ বিভিন্ন বিল্ট-ইন মেথড রয়েছে যা ডেটার সাথে কাজ করতে সাহায্য করে, যেমন: add, remove, reset, get, at, sort ইত্যাদি। এই মেথডগুলি ব্যবহার করে আপনি আপনার ডেটা সেটের সাথে বিভিন্ন কার্যক্রম সম্পাদন করতে পারেন।
Collection এর কিছু গুরুত্বপূর্ণ মেথড:
- add: একটি নতুন মডেল যোগ করা।
- remove: একটি মডেল মুছে ফেলা।
- reset: পুরো Collection রিসেট করা।
- get: Collection থেকে নির্দিষ্ট মডেল পাওয়া।
- at: Collection এর নির্দিষ্ট ইনডেক্স থেকে মডেল পাওয়া।
উদাহরণ:
// Collection তৈরি করা
var myBooks = new BooksCollection([
{ title: 'BackboneJS for Beginners', author: 'John Doe', year: 2022 },
{ title: 'Advanced BackboneJS', author: 'Jane Doe', year: 2023 }
]);
// নতুন বই যোগ করা
myBooks.add(new Book({ title: 'Mastering BackboneJS', author: 'Tom Smith', year: 2024 }));
// Collection থেকে প্রথম মডেল পাওয়া
var firstBook = myBooks.at(0);
console.log(firstBook.get('title')); // Output: BackboneJS for Beginners
// Collection থেকে বই মুছে ফেলা
myBooks.remove(firstBook);
// Collection রিসেট করা
myBooks.reset([
{ title: 'BackboneJS for Beginners', author: 'John Doe', year: 2022 }
]);
সারাংশ
BackboneJS এর Collection ডেটা গ্রুপ করার একটি শক্তিশালী টুল। এতে আপনি বিভিন্ন মডেল সংগ্রহ করতে পারেন এবং এসব মডেল এর উপর বিভিন্ন কার্যক্রম সম্পাদন করতে পারেন।
- Events:
add,remove,reset, ইত্যাদি ইভেন্টগুলো ব্যবহার করে আপনি Collection এর পরিবর্তন ট্র্যাক করতে পারেন। - Data Binding: Collection এর ডেটা View এর সাথে বাইন্ডিং করার মাধ্যমে আপনি ডেটা পরিবর্তনের সময় UI আপডেট করতে পারেন।
- Methods: Collection এর বিভিন্ন বিল্ট-ইন মেথড যেমন
add,remove,reset, ইত্যাদি ব্যবহার করে ডেটার সাথে কাজ করতে পারেন।
এই ফিচারগুলো BackboneJS কে ডাইনামিক ও ইন্টারঅ্যাকটিভ ওয়েব অ্যাপ্লিকেশন তৈরি করতে সক্ষম করে।
Read more
