BackboneJS এর Collection একটি বিশেষ ধরনের অবজেক্ট যা একাধিক মডেল ধারণ করে এবং এই মডেলগুলির উপর বিভিন্ন অপারেশন যেমন sorting (সাজানো), filtering (ছাঁটাই), এবং pagination (পেজিনেশন) সহজেই পরিচালনা করতে সাহায্য করে। এগুলোর মাধ্যমে আপনি খুব সহজেই একটি বড় ডেটাসেট ম্যানেজ করতে পারেন এবং ব্যবহারকারীকে আরও ইন্টারঅ্যাকটিভ অভিজ্ঞতা দিতে পারেন।
এখানে আমরা দেখব কিভাবে BackboneJS এর Collection ব্যবহার করে Sorting, Filtering, এবং Pagination করা যায়।
1. Sorting (সাজানো)
BackboneJS এর Collection সরাসরি sort মেথড প্রদান করে, যা একটি নির্দিষ্ট মানদণ্ড অনুযায়ী মডেলগুলো সাজাতে ব্যবহৃত হয়। আপনি যখন কোনো মডেল সাজান, তখন এটি change ইভেন্টটিও ট্রিগার করে।
উদাহরণ:
var Book = Backbone.Model.extend({
defaults: {
title: 'Unknown',
author: 'Unknown',
year: 0
}
});
var Books = Backbone.Collection.extend({
model: Book
});
// Book গুলি তৈরি করা
var books = new Books([
new Book({ title: 'BackboneJS Basics', author: 'John Doe', year: 2020 }),
new Book({ title: 'Learning JavaScript', author: 'Jane Doe', year: 2018 }),
new Book({ title: 'Advanced BackboneJS', author: 'Alice Smith', year: 2021 })
]);
// Sorting: year অনুযায়ী সাজানো
books.comparator = function(book) {
return book.get('year'); // year এর উপর ভিত্তি করে সাজানো হবে
};
// Sorting চালানো
books.sort();
// sorted বইগুলোর নাম প্রিন্ট করা
books.each(function(book) {
console.log(book.get('title') + ' (' + book.get('year') + ')');
});
এখানে, আমরা comparator প্রপার্টি ব্যবহার করে year অনুযায়ী মডেলগুলো সাজিয়েছি। যখন books.sort() কল করা হয়েছে, তখন মডেলগুলো year এর ভিত্তিতে সাজানো হয়েছে।
2. Filtering (ছাঁটাই)
BackboneJS এর Collection এ আপনি খুব সহজেই ডেটা ফিল্টার করতে পারেন। এর জন্য filter মেথড ব্যবহৃত হয়, যা একটি ফাংশন ব্যবহার করে আপনার কন্ডিশন অনুযায়ী মডেলগুলো নির্বাচন করে।
উদাহরণ:
var Book = Backbone.Model.extend({
defaults: {
title: 'Unknown',
author: 'Unknown',
year: 0
}
});
var Books = Backbone.Collection.extend({
model: Book
});
// Book গুলি তৈরি করা
var books = new Books([
new Book({ title: 'BackboneJS Basics', author: 'John Doe', year: 2020 }),
new Book({ title: 'Learning JavaScript', author: 'Jane Doe', year: 2018 }),
new Book({ title: 'Advanced BackboneJS', author: 'Alice Smith', year: 2021 })
]);
// Filtering: year 2020 এর পরের বই গুলি ফিল্টার করা
var filteredBooks = books.filter(function(book) {
return book.get('year') > 2019; // year 2020 এর পরের বই গুলি
});
// filtered বইগুলোর নাম প্রিন্ট করা
filteredBooks.forEach(function(book) {
console.log(book.get('title') + ' (' + book.get('year') + ')');
});
এখানে, books.filter() মেথড ব্যবহার করে আমরা year ২০২০ এর পরের বইগুলোকে ফিল্টার করেছি। এই মেথড একটি নতুন অ্যারে রিটার্ন করে যা আপনার শর্ত অনুযায়ী নির্বাচিত মডেলগুলো ধারণ করে।
3. Pagination (পেজিনেশন)
BackboneJS নিজে পেজিনেশন সরাসরি সমর্থন না করলেও, আপনি ম্যানুয়ালি পেজিনেশন লজিক তৈরি করতে পারেন। পেজিনেশন করার জন্য slice মেথড ব্যবহার করা যেতে পারে, যাতে নির্দিষ্ট সংখ্যক আইটেম প্রতিটি পেজে দেখানো হয়।
উদাহরণ:
var Book = Backbone.Model.extend({
defaults: {
title: 'Unknown',
author: 'Unknown',
year: 0
}
});
var Books = Backbone.Collection.extend({
model: Book
});
// Book গুলি তৈরি করা
var books = new Books([
new Book({ title: 'BackboneJS Basics', author: 'John Doe', year: 2020 }),
new Book({ title: 'Learning JavaScript', author: 'Jane Doe', year: 2018 }),
new Book({ title: 'Advanced BackboneJS', author: 'Alice Smith', year: 2021 }),
new Book({ title: 'ReactJS for Beginners', author: 'Mark Wilson', year: 2019 }),
new Book({ title: 'VueJS Essentials', author: 'Sarah Lee', year: 2022 })
]);
// Pagination: প্রতি পেজে 2টি বই দেখানো
var page = 1;
var perPage = 2;
var paginatedBooks = books.slice((page - 1) * perPage, page * perPage);
// পেজিনেটেড বইগুলোর নাম প্রিন্ট করা
paginatedBooks.forEach(function(book) {
console.log(book.get('title') + ' (' + book.get('year') + ')');
});
এখানে, আমরা books.slice() মেথড ব্যবহার করে প্রতি পেজে ২টি বই দেখানোর জন্য পেজিনেশন করেছি। page এবং perPage ভ্যারিয়েবলগুলোর মান পরিবর্তন করে আপনি পেজিনেশনের পদ্ধতি কাস্টমাইজ করতে পারেন।
4. মিলিত ব্যবহার: Sorting, Filtering, এবং Pagination
BackboneJS এ একাধিক অপারেশন যেমন Sorting, Filtering, এবং Pagination একসাথে ব্যবহার করা যেতে পারে। নিচে একটি উদাহরণ দেওয়া হলো যেখানে তিনটি অপারেশন একসাথে ব্যবহার করা হচ্ছে।
উদাহরণ:
var Book = Backbone.Model.extend({
defaults: {
title: 'Unknown',
author: 'Unknown',
year: 0
}
});
var Books = Backbone.Collection.extend({
model: Book
});
// Book গুলি তৈরি করা
var books = new Books([
new Book({ title: 'BackboneJS Basics', author: 'John Doe', year: 2020 }),
new Book({ title: 'Learning JavaScript', author: 'Jane Doe', year: 2018 }),
new Book({ title: 'Advanced BackboneJS', author: 'Alice Smith', year: 2021 }),
new Book({ title: 'ReactJS for Beginners', author: 'Mark Wilson', year: 2019 }),
new Book({ title: 'VueJS Essentials', author: 'Sarah Lee', year: 2022 })
]);
// Filtering: year 2020 এর পরের বই গুলি ফিল্টার করা
var filteredBooks = books.filter(function(book) {
return book.get('year') > 2019; // year 2020 এর পরের বই গুলি
});
// Sorting: year অনুযায়ী সাজানো
filteredBooks.sort(function(a, b) {
return a.get('year') - b.get('year'); // year অনুযায়ী ছোট থেকে বড়
});
// Pagination: প্রতি পেজে 2টি বই দেখানো
var page = 1;
var perPage = 2;
var paginatedBooks = filteredBooks.slice((page - 1) * perPage, page * perPage);
// পেজিনেটেড বইগুলোর নাম প্রিন্ট করা
paginatedBooks.forEach(function(book) {
console.log(book.get('title') + ' (' + book.get('year') + ')');
});
এখানে, প্রথমে আমরা Filtering করেছি (year 2020 এর পরের বই), তারপর Sorting করেছি (year অনুযায়ী সাজানো), এবং শেষে Pagination করেছি (প্রতি পেজে ২টি বই)।
সারাংশ
BackboneJS Collection এর মাধ্যমে Sorting, Filtering, এবং Pagination খুব সহজেই করা যায়।
- Sorting: মডেলগুলিকে একটি নির্দিষ্ট মানদণ্ড অনুযায়ী সাজানো।
- Filtering: নির্দিষ্ট শর্ত অনুযায়ী মডেলগুলো নির্বাচন করা।
- Pagination: ডেটার একটি সাবসেট প্রদর্শন করা, বিশেষ করে বড় ডেটাসেটগুলোকে পেজে ভাগ করা।
এই ফিচারগুলো BackboneJS ব্যবহারকারীদের ডেটা পরিচালনা এবং ইন্টারঅ্যাকটিভ ওয়েব অ্যাপ্লিকেশন তৈরি করতে অনেক সুবিধা প্রদান করে।
Read more
