BackboneJS এর Router ক্লাসটি আপনার অ্যাপ্লিকেশনের URL স্ট্রাকচার পরিচালনা করে এবং URL পরিবর্তনের উপর ভিত্তি করে ভিউ পরিবর্তন করে। এর মাধ্যমে আপনি SPA (Single Page Application) আর্কিটেকচারে এক পেজের মধ্যে বিভিন্ন ভিউ-এ নেভিগেট করতে পারেন, যা অ্যাপ্লিকেশনকে আরও দ্রুত এবং ইন্টারঅ্যাকটিভ করে তোলে।
Router BackboneJS অ্যাপ্লিকেশনে বিভিন্ন ভিউ এবং URL এর মধ্যে সম্পর্ক স্থাপন করে। যখন URL পরিবর্তিত হয়, তখন Router এর মাধ্যমে নতুন ভিউ রেন্ডার করা হয়।
1. BackboneJS Router এর ভূমিকা
BackboneJS-এর Router ক্লাসটি URL-এ পরিবর্তন সনাক্ত করে এবং সেই অনুযায়ী সংশ্লিষ্ট view রেন্ডার করার কাজ করে। Router URL এর জন্য routes এবং handlers নির্ধারণ করে, যা বিভিন্ন URL প্যাটার্নের জন্য ভিউ রেন্ডার করে।
Router এর প্রধান দায়িত্ব:
- URL Routing: URL এর প্রতিটি প্যাটার্নের জন্য একটি ভিউ বা অ্যাকশন নির্ধারণ করা।
- View Handling: নির্দিষ্ট URL প্যাটার্নের জন্য সঠিক ভিউ রেন্ডার করা।
- State Management: অ্যাপ্লিকেশনের স্টেট সংরক্ষণ এবং সঠিক ভিউ রেন্ডার করা।
2. Backbone Router সেটআপ
BackboneJS এর Router তৈরি করা খুবই সহজ। নিচে একটি সাধারণ উদাহরণ দেয়া হলো যেখানে Router এবং View এর মাধ্যমে বিভিন্ন পেজে নেভিগেট করা হয়।
ধাপ 1: Backbone Router তৈরি করা
// View 1: Home View
var HomeView = Backbone.View.extend({
render: function() {
this.$el.html('<h1>Welcome to the Home Page!</h1>');
return this;
}
});
// View 2: About View
var AboutView = Backbone.View.extend({
render: function() {
this.$el.html('<h1>About Us</h1>');
return this;
}
});
// Backbone Router
var AppRouter = Backbone.Router.extend({
routes: {
'': 'home', // Home পেজে নেভিগেট করার জন্য
'about': 'about' // About পেজে নেভিগেট করার জন্য
},
// Home রুটের জন্য হ্যান্ডলার
home: function() {
var homeView = new HomeView();
$('#app').html(homeView.render().el);
},
// About রুটের জন্য হ্যান্ডলার
about: function() {
var aboutView = new AboutView();
$('#app').html(aboutView.render().el);
}
});
// Router ইনস্ট্যান্স তৈরি করা
var appRouter = new AppRouter();
// Backbone.history.start() ব্যবহার করে URL হ্যান্ডলিং শুরু করা
Backbone.history.start();
এখানে:
- routes অবজেক্টে URL প্যাটার্ন এবং সেগুলোর জন্য নির্ধারিত handler methods দেওয়া হয়েছে।
- যখন URL এর অংশ পরিবর্তিত হয় (যেমন
/বা/about), তখনhomeবাaboutমেথডগুলি কল হবে এবং সংশ্লিষ্ট ভিউ রেন্ডার হবে।
ধাপ 2: HTML ফাইল তৈরি করা
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>BackboneJS Router Example</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.13.1/underscore-min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.5.0/backbone-min.js"></script>
</head>
<body>
<div id="app"></div>
<script src="app.js"></script>
</body>
</html>
এখানে #app ID এর ডিভের মধ্যে ভিউ রেন্ডার হবে, যা আপনার HomeView বা AboutView হতে পারে।
3. Backbone Router এবং URL চেঞ্জ
BackboneJS Router URL প্যাটার্নের ভিত্তিতে নির্দিষ্ট ভিউ রেন্ডার করার জন্য Backbone.history ব্যবহার করে। এটি অ্যাপ্লিকেশনকে "history" ম্যানেজমেন্ট দেয়, যা URL পরিবর্তন ট্র্যাক করতে সাহায্য করে। Backbone.history.start() ফাংশনটি কল করার মাধ্যমে URL হ্যান্ডলিং শুরু হয় এবং BackboneJS অ্যাপ্লিকেশনটি URL পরিবর্তন সনাক্ত করতে পারে।
URL হ্যাশ এবং ক্লিন URL:
BackboneJS, URL এর জন্য দুই ধরনের স্টাইল ব্যবহার করতে পারে:
- Hashbang URL (#!):
http://example.com/#/home - Clean URL:
http://example.com/home
এটি ব্যবহারের ক্ষেত্রে Backbone.history.start({ pushState: true }) ব্যবহার করা হয়, যা Clean URL সমর্থন করে।
Backbone.history.start({ pushState: true });
4. Router এর মাধ্যমে URL পরিবর্তন
BackboneJS এর Router এর সাহায্যে আপনি অ্যাপ্লিকেশনের URL পরিবর্তনও করতে পারেন। এর মাধ্যমে আপনি নতুন ভিউ রেন্ডার করার সময় URL পরিবর্তন করতে পারবেন, যাতে ব্রাউজার সঠিকভাবে নতুন স্টেট রিফ্লেক্ট করতে পারে।
উদাহরণ:
// ভিউ পরিবর্তন এবং URL আপডেট করা
var changePage = function(page) {
appRouter.navigate(page, { trigger: true }); // trigger: true মানে URL পরিবর্তন এবং রাউটারের হ্যান্ডলার কল হবে
};
// 'Home' এবং 'About' পেজে নেভিগেট করার জন্য
$('#go-home').click(function() {
changePage('');
});
$('#go-about').click(function() {
changePage('about');
});
এখানে, changePage ফাংশন ব্যবহার করে URL পরিবর্তন এবং ভিউ রেন্ডার করা হচ্ছে।
5. Backbone Router এবং View Life Cycle
BackboneJS এর ভিউগুলির জীবনচক্রে Router-এর ভূমিকা গুরুত্বপূর্ণ। যখন Router কোনো ভিউ রেন্ডার করে, তখন সেই ভিউটি render মেথডের মাধ্যমে DOM এ রেন্ডার করা হয়। নতুন ভিউ রেন্ডার করার সময় পুরনো ভিউটি উপযুক্তভাবে রিমুভ বা ডিসপোজ করতে হতে পারে।
উদাহরণ:
var AppRouter = Backbone.Router.extend({
routes: {
'': 'home',
'about': 'about'
},
home: function() {
if (this.currentView) {
this.currentView.remove(); // পুরনো ভিউটি রিমুভ
}
var homeView = new HomeView();
$('#app').html(homeView.render().el);
this.currentView = homeView; // নতুন ভিউ সেট করা
},
about: function() {
if (this.currentView) {
this.currentView.remove(); // পুরনো ভিউটি রিমুভ
}
var aboutView = new AboutView();
$('#app').html(aboutView.render().el);
this.currentView = aboutView; // নতুন ভিউ সেট করা
}
});
এখানে, যখন নতুন ভিউ রেন্ডার হয়, তখন পুরনো ভিউটি রিমুভ করা হচ্ছে যাতে DOM-এ শুধুমাত্র একটি ভিউ থাকে।
সারাংশ
BackboneJS এর Router অ্যাপ্লিকেশনে URL রাউটিং এবং ভিউ নেভিগেশন পরিচালনার জন্য অত্যন্ত গুরুত্বপূর্ণ। Router এর মাধ্যমে আপনি একটি সিঙ্গেল পেজ অ্যাপ্লিকেশন (SPA) তৈরি করতে পারেন যেখানে বিভিন্ন URL প্যাটার্নের জন্য নির্দিষ্ট ভিউ রেন্ডার করা হয়।
- Router URL-এর সাথে সম্পর্কিত ভিউ রেন্ডার করে এবং URL পরিবর্তনের সাথে সাথে অ্যাপ্লিকেশনের স্টেট পরিবর্তন করতে সহায়তা করে।
- navigate() মেথডের মাধ্যমে URL পরিবর্তন করা যায় এবং ভিউ পরিবর্তনও ট্রিগার করা যায়।
- Backbone.history URL ইতিহাস ট্র্যাক করে এবং ব্রাউজারের "Back" বা "Forward" বাটন ব্যবহার করার সময় সঠিক ভিউ লোড হয়।
এইভাবে BackboneJS Router URL এবং ভিউ পরিচালনার মাধ্যমে অ্যাপ্লিকেশনের নেভিগেশন সহজতর করে।
Read more
