BackboneJS Router

BackboneJS একটি MVC (Model-View-Controller) ফ্রেমওয়ার্ক যা রাউটার ব্যবস্থাপনার জন্য Backbone.Router প্রদান করে। এটি আপনাকে URL-এর মাধ্যমে অ্যাপ্লিকেশনের বিভিন্ন ভিউ নেভিগেট করতে সহায়তা করে। BackboneJS রাউটার এমনভাবে কাজ করে যাতে আপনার অ্যাপ্লিকেশনের প্রতিটি ভিউ একটি নির্দিষ্ট URL প্যাটার্নের সাথে যুক্ত থাকে এবং URL পরিবর্তন হলে নির্দিষ্ট ফাংশন বা ভিউ কল করা হয়।

1. Backbone.Router এর কাজ কী?

BackboneJS-এ, Router URL এর প্যাটার্নগুলোর সাথে ভিউ গুলি মানানসই করে। যখন URL পরিবর্তন হয়, তখন রাউটার সেই পরিবর্তনের সাথে সম্পর্কিত ফাংশন বা ভিউ চালিয়ে দেয়। এটি client-side routing বা single-page applications (SPA) তৈরির জন্য অত্যন্ত উপকারী।

Backbone.Router এর মূল কাজ হলো:

• URL-এ নির্দিষ্ট প্যাটার্নগুলো মানানসই করে ভিউ পরিবর্তন করা।
• ইউজারের বিভিন্ন ইনপুটের ভিত্তিতে পৃষ্ঠার ভিউ পরিবর্তন করা।
• একাধিক ভিউতে নেভিগেশন সহজ করা।

2. Backbone.Router কিভাবে কাজ করে?

Backbone.Router দুটি প্রধান ফিচার সরবরাহ করে:

• Route Mapping: URL প্যাটার্নগুলো নির্দিষ্ট ফাংশন বা ভিউয়ের সাথে ম্যানেজ করা।
• URL Fragment Handling: URL-এর # সাইন ব্যবহার করে URL-এর অংশভাগে পরিবর্তন ট্র্যাক করা।

Routes এবং Actions

Backbone.Router ব্যবহার করার জন্য, আপনি URL প্যাটার্ন এবং সেগুলোর সাথে সম্পর্কিত অ্যাকশন মডেল বা ভিউ হিসেবে ডিফাইন করেন।

3. Backbone.Router তৈরি করা

Backbone.Router ব্যবহার করতে হলে, প্রথমে আপনাকে একটি রাউটার ক্লাস তৈরি করতে হবে এবং এর মধ্যে routes অবজেক্টে প্যাটার্ন এবং ফাংশন যুক্ত করতে হবে। এই রাউটার ক্লাসের মধ্যে যেকোনো পদ্ধতি বা ভিউ কল করা যাবে।

উদাহরণ: Basic Backbone Router

// Backbone Router তৈরি করা
var AppRouter = Backbone.Router.extend({
    // URL প্যাটার্ন এবং তাদের সাথে সম্পর্কিত ফাংশন
    routes: {
        '': 'home', // home পেজ
        'about': 'about', // about পেজ
        'contact': 'contact' // contact পেজ
    },

    // Home রুটের জন্য ফাংশন
    home: function() {
        console.log('Welcome to the Home Page');
        $('#content').html('<h1>Home</h1>');
    },

    // About রুটের জন্য ফাংশন
    about: function() {
        console.log('Welcome to the About Page');
        $('#content').html('<h1>About Us</h1>');
    },

    // Contact রুটের জন্য ফাংশন
    contact: function() {
        console.log('Welcome to the Contact Page');
        $('#content').html('<h1>Contact Us</h1>');
    }
});

// রাউটার ইনস্ট্যান্স তৈরি করা
var appRouter = new AppRouter();

// Backbone.history.start() কল করে রাউটারকে শুরু করা
Backbone.history.start();

এই কোডটি একটি রাউটার তৈরি করবে যা home, about, এবং contact পেজের জন্য পৃথক ফাংশন পরিচালনা করবে। Backbone.history.start() কল করার মাধ্যমে রাউটার শুরু হবে এবং URL পরিবর্তনের সাথে সাথে নির্দিষ্ট ফাংশন কল হবে।

Routes এ প্যাটার্ন:

• '': রুট URL প্যাটার্ন (Home পেজ)
• 'about': About পেজের জন্য প্যাটার্ন
• 'contact': Contact পেজের জন্য প্যাটার্ন

এখন, আপনি যখন ব্রাউজারে #about বা #contact যোগ করবেন, তখন সংশ্লিষ্ট পেজ বা ভিউ আপডেট হবে।

4. Dynamic URL Parameters (ডায়নামিক প্যারামিটার)

Backbone.Router আপনাকে URL-এর প্যারামিটারস্ গ্রহণ করতে এবং সেগুলি আপনার ফাংশনে পাঠাতে সক্ষম করে। আপনি যখন URL এ ডায়নামিক প্যারামিটার ব্যবহার করেন, তখন আপনাকে ওই প্যারামিটারগুলো আপনার রাউটের মাধ্যমে পেতে হবে।

উদাহরণ: Dynamic Parameters with Backbone Router

var AppRouter = Backbone.Router.extend({
    routes: {
        'post/:id': 'viewPost', // post/:id URL প্যাটার্ন
    },

    viewPost: function(id) {
        console.log('Viewing Post with ID: ' + id);
        $('#content').html('<h1>Viewing Post ' + id + '</h1>');
    }
});

// রাউটার ইনস্ট্যান্স তৈরি করা
var appRouter = new AppRouter();

// Backbone.history.start() কল করে রাউটার শুরু করা
Backbone.history.start();

এখানে, post/:id একটি ডায়নামিক প্যাটার্ন, যেখানে :id প্যারামিটার হিসেবে কাজ করবে। যখন আপনি #post/123 বা #post/456 URL ব্যবহার করবেন, তখন সেই প্যারামিটার (যেমন 123 বা 456) viewPost ফাংশনে পাঠানো হবে।

5. History Management in Backbone Router

BackboneJS তে Backbone.history ম্যানেজার ব্যবহার করে URL পরিবর্তন ট্র্যাক করা হয়। এটি hashchange ইভেন্টের মাধ্যমে URL পরিবর্তন মনিটর করে এবং আপনার রাউটারকে সেই পরিবর্তন অনুযায়ী কার্যকরী করে তোলে।

• Backbone.history.start(): এটি Backbone.history শুরু করে এবং রাউটারকে URL পরিবর্তন শুনতে সক্ষম করে।
• Backbone.history.navigate(): এই মেথড ব্যবহার করে আপনি প্রোগ্রামেটিক্যালি URL পরিবর্তন করতে পারেন।

উদাহরণ: Programmatic Navigation

// URL পরিবর্তন করতে Backbone.history.navigate() ব্যবহার করা
Backbone.history.navigate('contact', { trigger: true });

এটি #contact URL এ পরিবর্তন করবে এবং সম্পর্কিত ফাংশন কল করবে।

6. Nested Routes (নেস্টেড রুটস)

BackboneJS এ nested routes তৈরি করার জন্য, আপনি একাধিক রাউটারের মধ্যে নেভিগেশন করতে পারেন। একাধিক রাউটার তৈরি করে এবং তাদের মধ্যে ভিউ অর্গানাইজ করা যায়।

উদাহরণ: Nested Router

var MainRouter = Backbone.Router.extend({
    routes: {
        'home': 'home'
    },

    home: function() {
        console.log('Main Home Page');
    }
});

var SubRouter = Backbone.Router.extend({
    routes: {
        'subpage': 'subPage'
    },

    subPage: function() {
        console.log('Sub Page');
    }
});

var mainRouter = new MainRouter();
var subRouter = new SubRouter();

Backbone.history.start();

এখানে, MainRouter এবং SubRouter দুটি আলাদা রাউটার তৈরি করা হয়েছে যা তাদের নিজস্ব রুট এবং ফাংশন পরিচালনা করছে।

সারাংশ

BackboneJS-এ Backbone.Router এর মাধ্যমে আপনি সহজেই এক বা একাধিক রাউট তৈরি করতে পারেন, URL এর পরিবর্তনের সঙ্গে সম্পর্কিত ফাংশন কল করতে পারেন, এবং অ্যাপ্লিকেশনের বিভিন্ন ভিউ নেভিগেট করতে পারেন। এটি Single Page Applications (SPA) তৈরি করতে একটি শক্তিশালী হাতিয়ার, যেখানে ইউজারের কোনো নতুন পৃষ্ঠা লোড ছাড়া ভিউ পরিবর্তন হয়।

• Backbone.Router ব্যবহারের মাধ্যমে আপনি URL প্যাটার্ন এবং ফাংশন তৈরি করতে পারেন।
• Dynamic Parameters URL এর মাধ্যমে মডেল বা ভিউ প্যারামিটার পেতে সাহায্য করে।
• History Management এর মাধ্যমে URL পরিবর্তন ট্র্যাক করা সম্ভব হয়।

BackboneJS এর Router একটি অত্যন্ত গুরুত্বপূর্ণ উপাদান যা ওয়েব অ্যাপ্লিকেশনের ইউজার নেভিগেশন এবং URL এর মধ্যে সমন্বয় রক্ষা করে। এটি URL routing এর মাধ্যমে বিভিন্ন পেজ বা অ্যাপ্লিকেশনের ভিউগুলোর মধ্যে স্যুইচ করতে সহায়তা করে। BackboneJS এর Router এর মাধ্যমে আপনি অ্যাপ্লিকেশনের বিভিন্ন অংশে নেভিগেট করতে পারেন এবং এতে URL-র উপর নির্ভর করে নির্দিষ্ট কার্যকলাপ পরিচালনা করতে সক্ষম হন।

BackboneJS Router এর ভূমিকা

1. URL Routing: Router URL-এ পরিবর্তন ঘটালে কোনো নির্দিষ্ট ভিউ বা ফাংশন চালাতে পারে। এটি ওয়েব অ্যাপ্লিকেশনে ক্লায়েন্ট-সাইড রাউটিংয়ের ব্যবস্থা করে, যেখানে পেজ রিফ্রেশ ছাড়াই URL পরিবর্তন হয়।
2. অ্যাপ্লিকেশন স্টেট ম্যানেজমেন্ট: Router অ্যাপ্লিকেশনের বিভিন্ন স্টেট ট্র্যাক করে, যেমন কোন পেজ বা ভিউ বর্তমানে দেখানো হচ্ছে। এটি আপনাকে অ্যাপ্লিকেশনটির অবস্থা এবং ইউজারের ক্রিয়াকলাপের উপর ভিত্তি করে ভিউ রেন্ডার করার সুযোগ দেয়।
3. ইউজার ইন্টারঅ্যাকশন: Router ব্যবহার করে ইউজারের অ্যাকশন বা লিঙ্ক ক্লিক করার পর URL এ পরিবর্তন ঘটিয়ে নির্দিষ্ট ভিউতে নেভিগেট করা যায়। এটি ক্লায়েন্ট সাইডে অ্যাপ্লিকেশনের ভিউ পরিবর্তনের জন্য ব্যবহৃত হয়, যেমন এক পেজ অ্যাপ্লিকেশন (SPA - Single Page Application) এ।

BackboneJS Router তৈরি করা

BackboneJS এ একটি Router তৈরি করতে হলে Backbone.Router ক্লাসের একটি সাবক্লাস তৈরি করতে হয়। এতে আপনি URL প্যাটার্ন এবং সেগুলোর জন্য হ্যান্ডলারের (যে ফাংশনটি কল হবে) ম্যাপিং করতে পারবেন।

Router এর মৌলিক কাঠামো:

var AppRouter = Backbone.Router.extend({
    routes: {
        // URL প্যাটার্ন এবং তার জন্য হ্যান্ডলার ফাংশন
        'home': 'showHome',       // URL: #home -> showHome ফাংশন কল হবে
        'about': 'showAbout',     // URL: #about -> showAbout ফাংশন কল হবে
        'post/:id': 'showPost'    // URL: #post/1 -> showPost ফাংশন কল হবে এবং id ১ পাস হবে
    },

    // হ্যান্ডলার ফাংশন
    showHome: function() {
        console.log('Home page is displayed');
    },

    showAbout: function() {
        console.log('About page is displayed');
    },

    showPost: function(id) {
        console.log('Post page for post ID: ' + id);
    }
});

এখানে, routes অবজেক্টে URL প্যাটার্ন এবং তাদের জন্য সংশ্লিষ্ট ফাংশন ম্যাপ করা হয়েছে। যখন ইউজার URL এর মধ্যে নির্দিষ্ট প্যাটার্ন অনুসরণ করে, তখন সংশ্লিষ্ট ফাংশন কল হবে।

Router ইন্সট্যান্স তৈরি করা এবং চালানো

Router তৈরি করার পর, আপনাকে একটি ইন্সট্যান্স তৈরি করতে হবে এবং Backbone.history.start() মেথড কল করতে হবে, যাতে রাউটিং কাজ করতে শুরু করে। এটি URL পরিবর্তনগুলির উপর নজর রাখে এবং সেগুলোর জন্য নির্দিষ্ট ফাংশন চালায়।

// রাউটার ইন্সট্যান্স তৈরি
var myRouter = new AppRouter();

// Backbone.history.start() কল করা, যা রাউটার চালু করবে
Backbone.history.start();

Backbone.history.start() মেথড URL হ্যাশ পরিবর্তন বা ব্রাউজারের নেভিগেশন পরিবর্তনের প্রতি সাড়া দেয়। এটি একটি hashbang (যেমন #home, #about) নেভিগেশন পদ্ধতি ব্যবহার করে।

URL এবং হ্যাশের মাধ্যমে নেভিগেশন

BackboneJS আপনাকে URL পরিবর্তন করার জন্য navigate() মেথড সরবরাহ করে, যা ব্যবহার করে আপনি হ্যাশ URL পরিবর্তন করতে পারেন এবং বিভিন্ন ভিউতে নেভিগেট করতে পারেন। উদাহরণস্বরূপ:

// URL পরিবর্তন
myRouter.navigate('home', { trigger: true });  // #home এ নেভিগেট করবে

এখানে, { trigger: true } ব্যবহার করে, URL পরিবর্তন হলে সংশ্লিষ্ট ফাংশন স্বয়ংক্রিয়ভাবে ট্রিগার হবে।

BackboneJS Router এর ইভেন্ট হ্যান্ডলিং

BackboneJS এর Router URL এর পরিবর্তনের সাথে সাথে ইভেন্ট গুলি পরিচালনা করতে সক্ষম। আপনি URL পরিবর্তনের জন্য ইভেন্ট হ্যান্ডলিং করতে পারেন।

Example - URL পরিবর্তনের সময় কিছু ফাংশন চালানো:

var AppRouter = Backbone.Router.extend({
    routes: {
        'home': 'showHome',
        'about': 'showAbout'
    },

    initialize: function() {
        // যখন রাউটার তৈরি হয় তখন এই ফাংশনটি কল হবে
        console.log('Router initialized');
    },

    showHome: function() {
        console.log('Home page is displayed');
    },

    showAbout: function() {
        console.log('About page is displayed');
    }
});

// রাউটার তৈরি এবং শুরু করা
var myRouter = new AppRouter();
Backbone.history.start();

এখানে, initialize() মেথড ব্যবহার করে রাউটার ইন্সট্যান্স তৈরির সময় কিছু কোড এক্সিকিউট করা হয়েছে। আপনি চাইলে রাউটার স্টার্ট হওয়ার সময় বা URL পরিবর্তন হওয়ার সময় নির্দিষ্ট কোনো কার্যকলাপ চালাতে পারেন।

সারাংশ

BackboneJS এর Router ক্লায়েন্ট সাইড নেভিগেশন পরিচালনা করে, যা একটি ওয়েব অ্যাপ্লিকেশনকে Single Page Application (SPA) হিসেবে তৈরি করতে সহায়তা করে। এটি URL প্যাটার্ন এবং ফাংশনের মাধ্যমে ভিউ বা কন্টেন্ট পরিবর্তন করতে ব্যবহৃত হয়। Router এর মাধ্যমে আপনি অ্যাপ্লিকেশনটির বিভিন্ন স্টেট ট্র্যাক করতে পারেন এবং URL পরিবর্তনের ভিত্তিতে ভিউ রেন্ডার করতে পারেন।

• routes: URL প্যাটার্ন এবং সংশ্লিষ্ট ফাংশন ম্যাপিং
• navigate(): URL পরিবর্তন করার জন্য ব্যবহৃত
• Backbone.history.start(): রাউটিং চালু করার জন্য ব্যবহৃত

এভাবে BackboneJS এর Router ব্যবহার করে আপনি সহজেই একটি ক্লায়েন্ট সাইড ওয়েব অ্যাপ্লিকেশন তৈরি করতে পারবেন যা রাউটিং এবং ইউজার ইন্টারঅ্যাকশন সঠিকভাবে পরিচালনা করবে।

BackboneJS তে Routes ব্যবহার করে অ্যাপ্লিকেশন নেভিগেশন (নেভিগেশন বা URL রাউটিং) পরিচালনা করা হয়। রাউটিং মূলত ইউজারের URL এ পরিবর্তন অনুসারে ভিউ পরিবর্তন এবং সেই অনুযায়ী অ্যাকশন হ্যান্ডলিং করা। এটি স্পা (Single Page Application) তৈরি করার জন্য অত্যন্ত গুরুত্বপূর্ণ, কারণ এটি আপনাকে অ্যাপ্লিকেশন স্টেটের উপর ভিত্তি করে ডাইনামিক কনটেন্ট রেন্ডার করার সুযোগ দেয়।

BackboneJS এ Routes কী?

BackboneJS এ Routes হলো একটি রাউটিং সিস্টেম, যা URL এর পাথ অনুসারে নির্দিষ্ট ফাংশন বা ভিউকে ট্রিগার করে। সাধারণত, আপনি যখন URL এর কোনো অংশ পরিবর্তন করেন (যেমন /home, /about), তখন Backbone.Router একটি নির্দিষ্ট রুট বা অ্যাকশন কল করে, যা ভিউতে ডেটা রেন্ডার করে অথবা কোনো নির্দিষ্ট কাজ সম্পন্ন করে।

BackboneJS Routes কিভাবে কাজ করে?

BackboneJS এ রাউটিং চালু করার জন্য প্রধানত দুটি অংশ ব্যবহৃত হয়:

1. Backbone.Router: এই ক্লাস URL এর পাথ মেলানোর কাজ করে।
2. Backbone.history: এটি URL-এর ইতিহাস পরিচালনা করে এবং অ্যাপ্লিকেশন স্টেট ম্যানেজমেন্ট করে।

BackboneJS এ Routes তৈরি করার ধাপ

1. Backbone.Router তৈরি করা

BackboneJS এর Router ক্লাসের মাধ্যমে রাউট তৈরি করা হয়। Router ক্লাসটি বিভিন্ন রুটের জন্য বিভিন্ন ফাংশন নির্ধারণ করে। যখন কোনো রুটের URL মেলে, তখন তার সাথে যুক্ত ফাংশনটি কল করা হয়।

// Router তৈরি করা
var AppRouter = Backbone.Router.extend({
    // রাউটস ডিফাইন করা
    routes: {
        'home': 'homePage',   // /home URL এর জন্য homePage ফাংশন কল হবে
        'about': 'aboutPage', // /about URL এর জন্য aboutPage ফাংশন কল হবে
        '*actions': 'defaultPage' // অন্য যেকোনো URL এর জন্য defaultPage ফাংশন কল হবে
    },

    // homePage ফাংশন
    homePage: function() {
        console.log('Welcome to the Home Page!');
    },

    // aboutPage ফাংশন
    aboutPage: function() {
        console.log('Welcome to the About Page!');
    },

    // defaultPage ফাংশন
    defaultPage: function(actions) {
        console.log('Page not found, default action triggered');
    }
});

এখানে আমরা routes প্রপার্টি ব্যবহার করেছি যা একটি অবজেক্ট হিসেবে রাউট এবং তাদের সাথে সংশ্লিষ্ট ফাংশন সংজ্ঞায়িত করে।

2. Backbone.history.start() ব্যবহার করা

BackboneJS এর history অবজেক্ট অ্যাপ্লিকেশনের ইতিহাস পরিচালনা করে। এটি URL পরিবর্তন মনিটর করে এবং যখন URL পরিবর্তন হয় তখন সঠিক রাউট ফাংশন কল করে। history.start() মেথডটি রাউটিং সিস্টেম চালু করে এবং আপনার অ্যাপ্লিকেশনকে URL এর ভিত্তিতে কাজ করার সুযোগ দেয়।

// Router ইনস্ট্যান্স তৈরি করা
var appRouter = new AppRouter();

// Backbone history শুরু করা
Backbone.history.start();

Backbone.history.start() ডাকা ছাড়া রাউটিং কাজ করবে না, কারণ এটি URL পরিবর্তন ট্র্যাক করতে এবং সঠিক রাউট ফাংশন কল করতে ব্যবহৃত হয়।

Routes এর মাধ্যমে নেভিগেশন পরিচালনা করা

3. URL পরিবর্তন করে নেভিগেশন করা

BackboneJS এ navigate() মেথড ব্যবহার করে নেভিগেট করা যায়। এই মেথডের মাধ্যমে URL পরিবর্তন করা হয় এবং তা রাউটিং সিস্টেমে প্রাসঙ্গিক ফাংশন কল করতে সহায়তা করে। navigate() মেথডটি হ্যাশচেঞ্জ (hashchange) কিংবা পুশস্টেট (pushState) পদ্ধতি ব্যবহার করে URL পরিবর্তন করে।

// navigate() ব্যবহার করে URL পরিবর্তন করা
appRouter.navigate('home', { trigger: true }); // /home URL এ নেভিগেট করবে
appRouter.navigate('about', { trigger: true }); // /about URL এ নেভিগেট করবে

এখানে trigger: true প্যারামিটার দেওয়া হয়েছে, যাতে BackboneJS রাউট ফাংশনটিকে ট্রিগার করে।

4. Backbone Router এর URL হ্যান্ডলিং

BackboneJS এ Router ব্যবহারের মাধ্যমে অ্যাপ্লিকেশন URL হ্যান্ডলিং খুবই সহজ হয়। আমরা একটি URL নির্দিষ্ট ফাংশনের সাথে যুক্ত করতে পারি, যাতে অ্যাপ্লিকেশন বিভিন্ন ভিউ বা উপাদান রেন্ডার করতে পারে।

var AppRouter = Backbone.Router.extend({
    routes: {
        'home': 'homePage',
        'about': 'aboutPage',
        'contact/:id': 'contactPage', // ডাইনামিক রাউট
        '*actions': 'defaultPage'
    },

    homePage: function() {
        console.log('Home page');
    },

    aboutPage: function() {
        console.log('About page');
    },

    // ডাইনামিক প্যারামিটার :id এর মাধ্যমে URL হ্যান্ডলিং
    contactPage: function(id) {
        console.log('Contact page with ID: ' + id);
    },

    defaultPage: function(actions) {
        console.log('Page not found');
    }
});

// Router ইনস্ট্যান্স তৈরি করা
var appRouter = new AppRouter();

// Backbone.history.start() কল করা
Backbone.history.start();

// URL পরিবর্তন
appRouter.navigate('contact/123', { trigger: true });  // Contact page with ID: 123

এখানে contact/:id রাউটের মাধ্যমে একটি ডাইনামিক প্যারামিটার (id) ব্যবহার করা হয়েছে, যা URL এ থাকা মানকে ফাংশনে পাস করে। যেমন /contact/123 URL হ্যান্ডলিং করলে, তা id প্যারামিটার হিসেবে 123 পাস করবে।

সারাংশ

BackboneJS এ Routes ব্যবহারের মাধ্যমে আপনি URL পাথ অনুসারে বিভিন্ন ফাংশন বা ভিউ কল করতে পারেন। এটি Single Page Application (SPA) এর জন্য খুবই উপকারী, কারণ এর মাধ্যমে আপনি একটি একক HTML পৃষ্ঠায় ইউজারের নেভিগেশন পরিচালনা করতে পারেন। BackboneJS এর Router ক্লাস, routes প্রপার্টি, এবং Backbone.history.start() ব্যবহার করে URL পরিবর্তন এবং ইভেন্ট হ্যান্ডলিং করা হয়।

• navigate() মেথড দিয়ে URL পরিবর্তন করা যায়।
• Router ক্লাসের মাধ্যমে রাউট তৈরি করে এবং তা ট্রিগার করা হয়।
• Backbone.history.start() অ্যাপ্লিকেশনের ইতিহাস ম্যানেজমেন্ট শুরু করে।

এই সুবিধাগুলো আপনার অ্যাপ্লিকেশনের নেভিগেশন এবং UI রেন্ডারিংকে আরও ডাইনামিক এবং ইউজার-বান্ধব করে তোলে।

BackboneJS এ Router একটি গুরুত্বপূর্ণ কম্পোনেন্ট যা URL রাউটিং এবং ভিউয়ের মধ্যে সম্পর্ক তৈরি করতে ব্যবহৃত হয়। এটি অ্যাপ্লিকেশনের বিভিন্ন ভিউ এবং স্টেট পরিবর্তনের জন্য URL নির্ধারণ করে এবং ইউজারের ইন্টারঅ্যাকশনের ভিত্তিতে নির্দিষ্ট রাউটের মাধ্যমে সঠিক ভিউ লোড করতে সাহায্য করে।

BackboneJS এর Router URL গুলিকে একটি বিশেষ অ্যাকশন বা ফাংশনে ম্যাপ করে। এটি মূলত single-page applications (SPA) তৈরি করতে ব্যবহৃত হয়, যেখানে পেজ রিলোড ছাড়াই বিভিন্ন ভিউ পরিবর্তন করা হয়।

1. BackboneJS Router পরিচিতি

BackboneJS এ Router একটি বিশেষ অবজেক্ট যা Backbone.Router এর মাধ্যমে তৈরি করা হয়। এই Router নির্দিষ্ট URL প্যাটার্ন বা রাউটগুলোর সাথে সম্পর্কিত ফাংশন নির্ধারণ করে, যাতে আপনি ইউজারের URL রিকোয়েস্ট অনুযায়ী প্রয়োজনীয় ভিউ রেন্ডার করতে পারেন।

Router এর প্রধান কাজ:

• ইউজারের URL পরিবর্তন সনাক্ত করা।
• URL প্যাটার্নের সাথে সম্পর্কিত ফাংশন কল করা।
• অ্যাপ্লিকেশন স্টেট এবং ভিউ গুলি নির্দিষ্ট URL এর সাথে ম্যাপ করা।

2. Backbone.Router তৈরি করা

BackboneJS এ Router তৈরি করার জন্য, প্রথমে Backbone.Router এর একটি সাবক্লাস তৈরি করতে হয়, এবং তার মধ্যে বিভিন্ন রাউটারের জন্য কাস্টম ফাংশন গুলো ডিফাইন করতে হয়।

উদাহরণ:

var AppRouter = Backbone.Router.extend({
    // URL রাউটিং সংজ্ঞায়িত করা
    routes: {
        'home': 'home',            // '/home' URL এ home ফাংশন কল হবে
        'about': 'about',          // '/about' URL এ about ফাংশন কল হবে
        'contact': 'contact',      // '/contact' URL এ contact ফাংশন কল হবে
        '*default': 'default'      // ডিফল্ট রাউট যদি কোনো মিলে না যায়
    },

    // home রাউট ফাংশন
    home: function() {
        console.log('Home page');
        // এখানে home page এর ভিউ বা কন্টেন্ট রেন্ডার করা যেতে পারে
    },

    // about রাউট ফাংশন
    about: function() {
        console.log('About page');
        // about page এর জন্য রেন্ডারিং করতে হবে
    },

    // contact রাউট ফাংশন
    contact: function() {
        console.log('Contact page');
        // contact page এর জন্য রেন্ডারিং করতে হবে
    },

    // ডিফল্ট রাউট ফাংশন
    default: function() {
        console.log('404 Not Found');
        // ডিফল্ট ভিউ বা 404 পেজ রেন্ডার করা যেতে পারে
    }
});

// Router ইন্সট্যান্স তৈরি
var appRouter = new AppRouter();

// Backbone.history.start() কল করে হ্যাশব্রাউজিং শুরু করা
Backbone.history.start();

এখানে:

• routes প্রপার্টি URL প্যাটার্ন এবং সংশ্লিষ্ট ফাংশন ডিফাইন করে।
• 'home' URL প্যাটার্ন এর জন্য home ফাংশন কল হবে।
• *'default' দ্বারা কোনো মিলে না গেলে default ফাংশন কল হবে, যা সাধারণত 404 পেজ নির্দেশ করে।

3. Backbone Router এ URL Mapping

BackboneJS এর Router URL গুলোর সাথে বিভিন্ন অ্যাকশন ম্যাপ করে। URL প্যাটার্ন গুলো regex এর মতো কাজ করে এবং এতে ডাইনামিক প্যারামিটারও রাখা যায়।

উদাহরণ:

var AppRouter = Backbone.Router.extend({
    routes: {
        'user/:id': 'showUser',   // URL এ :id ডাইনামিক প্যারামিটার
        'post/:postId/comments': 'showComments', // ডাইনামিক প্যারামিটার সহ URL
        '*default': 'default'     // ডিফল্ট রাউট
    },

    showUser: function(id) {
        console.log('User ID: ' + id); // :id এর মান কনসোলে দেখাবে
    },

    showComments: function(postId) {
        console.log('Post ID: ' + postId + ' - Comments');
    },

    default: function() {
        console.log('404 Not Found');
    }
});

var appRouter = new AppRouter();
Backbone.history.start();

এখানে:

• 'user/:id' রাউটে :id একটি ডাইনামিক প্যারামিটার। যেমন /user/123 হলে, 123 মান id হিসাবে ফাংশনে যাবে।
• 'post/:postId/comments' রাউটে :postId ডাইনামিক প্যারামিটার হিসেবে কাজ করবে।

এভাবে আপনি URL এর মাধ্যমে ডাইনামিক ডেটা পাস করে বিভিন্ন অ্যাকশন বা ভিউ রেন্ডার করতে পারবেন।

4. BackboneJS এ History API ব্যবহার

BackboneJS এর History API ব্যবহার করে URL হালনাগাদ করার সাথে সাথে ব্রাউজারের হ্যাশ পরিবর্তন করেও পেজ রিলোড ছাড়াই অ্যাপ্লিকেশন রাউট করা যায়।

উদাহরণ:

var AppRouter = Backbone.Router.extend({
    routes: {
        'home': 'home',
        'about': 'about'
    },

    home: function() {
        console.log('Welcome to Home');
    },

    about: function() {
        console.log('About Us');
    }
});

var appRouter = new AppRouter();
Backbone.history.start({ pushState: true }); // History API সক্রিয় করা

// Now you can navigate using pushState, e.g., /home or /about without reloading the page.

এখানে, pushState: true ব্যবহার করলে আপনি ব্রাউজারের history.pushState ব্যবহার করতে পারবেন, যার মাধ্যমে পেজ রিলোড ছাড়াই URL পরিবর্তন করা যাবে।

5. URL পরিবর্তন এবং পেজ নেভিগেশন

BackboneJS এর Router কে ব্যবহার করে আপনি programmatically URL পরিবর্তন করতে পারেন। এর জন্য navigate ফাংশন ব্যবহার করা হয়। এটি URL পরিবর্তন করে এবং নির্দিষ্ট রাউটের সাথে অ্যাকশন কল করে।

উদাহরণ:

var AppRouter = Backbone.Router.extend({
    routes: {
        'home': 'home',
        'about': 'about'
    },

    home: function() {
        console.log('Home page');
    },

    about: function() {
        console.log('About page');
    }
});

var appRouter = new AppRouter();

// Programmatically navigate to about page
appRouter.navigate('about', { trigger: true }); // এটি about রাউট কল করবে

এখানে navigate('about', { trigger: true }) কল করার মাধ্যমে আপনি about পেজে নেভিগেট করতে পারবেন এবং স্বয়ংক্রিয়ভাবে about ফাংশন কল হবে।

সারাংশ

BackboneJS এ Router একটি অত্যন্ত গুরুত্বপূর্ণ অংশ যা URL এবং ভিউ এর মধ্যে সম্পর্ক তৈরি করে। এটি URL প্যাটার্নের উপর ভিত্তি করে বিভিন্ন ফাংশন কল করে এবং অ্যাপ্লিকেশন স্টেট এবং ভিউ ম্যানেজ করে।

• Router তৈরি করা: Backbone.Router এর সাবক্লাস তৈরি করে URL প্যাটার্ন এবং সংশ্লিষ্ট ফাংশন সংজ্ঞায়িত করা হয়।
• URL Mapping: URL গুলোর সাথে ডাইনামিক প্যারামিটার ব্যবহার করে কাস্টম অ্যাকশন নির্ধারণ করা হয়।
• History API: pushState এর মাধ্যমে পেজ রিলোড ছাড়াই URL পরিবর্তন করা যায়।
• Programmatic Navigation: navigate ফাংশনের মাধ্যমে URL পরিবর্তন করা হয় এবং নির্দিষ্ট রাউটের সাথে ফাংশন কল করা হয়।

BackboneJS এর এই রাউটিং এবং URL ম্যানেজমেন্ট ফিচারগুলোকে ব্যবহার করে আপনি শক্তিশালী single-page applications (SPA) তৈরি করতে পারবেন।

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 এবং ভিউ পরিচালনার মাধ্যমে অ্যাপ্লিকেশনের নেভিগেশন সহজতর করে।

BackboneJS এ Router ব্যবহার করা হয় ইউজারের নেভিগেশন (URL পরিবর্তন) ট্র্যাক করার জন্য। এটি আপনাকে বিভিন্ন রাউট বা পৃষ্ঠায় নেভিগেট করার সুবিধা প্রদান করে এবং আপনার অ্যাপ্লিকেশনে URL-এর ভিত্তিতে নির্দিষ্ট কার্যকলাপ বা ফাংশন চালাতে সাহায্য করে। Router বিভিন্ন ইভেন্ট এবং ক্যালব্যাক ফাংশন ব্যবহার করে URL পরিবর্তনের প্রতিক্রিয়া জানায় এবং সেই অনুযায়ী অ্যাপ্লিকেশনের ভিউ বা মডেল আপডেট করে।

Router এর মৌলিক কাঠামো

BackboneJS এ Router একটি Backbone.Router অবজেক্টের মাধ্যমে কাজ করে। এটি URL এর প্যাটার্ন মেলানোর জন্য routes অবজেক্ট ব্যবহার করে এবং তখন সেই প্যাটার্নের জন্য নির্দিষ্ট ক্যালব্যাক ফাংশন ট্রিগার করে।

1. Router এর সেটআপ

প্রথমে, Backbone.Router তৈরি করতে হয় এবং এতে URL প্যাটার্ন মেলানোর জন্য routes অবজেক্ট ব্যবহার করতে হয়।

উদাহরণ:

var AppRouter = Backbone.Router.extend({
    // রাউট প্যাটার্ন এবং ক্যালব্যাক ফাংশন
    routes: {
        "home": "showHome",          // '/home' URL এ showHome ফাংশন কল হবে
        "about": "showAbout",        // '/about' URL এ showAbout ফাংশন কল হবে
        "contact/:id": "showContact" // '/contact/:id' URL এ showContact ফাংশন কল হবে
    },

    // Home পৃষ্ঠা দেখানোর ক্যালব্যাক ফাংশন
    showHome: function() {
        console.log("Welcome to the Home page");
    },

    // About পৃষ্ঠা দেখানোর ক্যালব্যাক ফাংশন
    showAbout: function() {
        console.log("Welcome to the About page");
    },

    // Contact পৃষ্ঠা দেখানোর ক্যালব্যাক ফাংশন, ID প্যারামিটার সহ
    showContact: function(id) {
        console.log("Contact ID: " + id);
    }
});

এখানে, আমরা তিনটি রাউট প্যাটার্ন এবং তাদের সাথে সম্পর্কিত ক্যালব্যাক ফাংশনগুলো নির্ধারণ করেছি।

2. Router এর ইভেন্ট এবং ক্যালব্যাক ফাংশন

BackboneJS এর Router রাউট মেলানোর সময় ইভেন্ট ট্রিগার করে। এই ইভেন্টগুলো URL পরিবর্তনের সঙ্গে যুক্ত থাকে এবং সেই অনুযায়ী ক্যালব্যাক ফাংশন কাজ করে। ইভেন্ট এবং ক্যালব্যাক ফাংশনগুলি বিভিন্ন ধরনের অ্যাকশন পরিচালনা করতে পারে।

রাউট ইভেন্ট:

• initialize: রাউটার প্রথমবার ইনস্ট্যানশিয়েট হলে এটি কল হয়।
• route: কোনো রাউট ম্যাচ হলে এটি ট্রিগার হয়।
• route:before: কোনো রাউট ট্রিগার হওয়ার আগে এটি কল হয় (যদি ব্যবহৃত হয়)।

ক্যালব্যাক ফাংশন:

ক্যালব্যাক ফাংশন হল সেই ফাংশনগুলো যেগুলি রাউট প্যাটার্ন মেলানোর পরে কল হয়। এগুলির মাধ্যমে আপনি UI বা অন্যান্য অ্যাপ্লিকেশন স্টেট পরিবর্তন করতে পারেন।

3. Router Example: Events এবং Callback Functions

এখন একটি সম্পূর্ণ উদাহরণ দেখবো যেখানে আমরা Router এর ইভেন্ট এবং ক্যালব্যাক ফাংশন ব্যবহার করব।

উদাহরণ কোড:

// Router তৈরি করা
var AppRouter = Backbone.Router.extend({
    // রাউট প্যাটার্ন এবং তাদের জন্য ক্যালব্যাক ফাংশন
    routes: {
        "home": "showHome",
        "about": "showAbout",
        "contact/:id": "showContact"
    },

    // initialize ইভেন্ট
    initialize: function() {
        console.log("Router Initialized!");
    },

    // Home পৃষ্ঠা দেখানোর ক্যালব্যাক ফাংশন
    showHome: function() {
        console.log("Welcome to the Home page");
        $("#app").html("<h1>Home Page</h1>");
    },

    // About পৃষ্ঠা দেখানোর ক্যালব্যাক ফাংশন
    showAbout: function() {
        console.log("Welcome to the About page");
        $("#app").html("<h1>About Page</h1>");
    },

    // Contact পৃষ্ঠা দেখানোর ক্যালব্যাক ফাংশন, যেখানে ID প্যারামিটার থাকবে
    showContact: function(id) {
        console.log("Contact ID: " + id);
        $("#app").html("<h1>Contact Page</h1><p>ID: " + id + "</p>");
    }
});

// রাউটার ইনস্ট্যানশিয়েট করা
var router = new AppRouter();

// Backbone History শুরু করা (এই অংশটি ব্রাউজার URL ট্র্যাক করার জন্য প্রয়োজন)
Backbone.history.start();

// পৃষ্ঠা নেভিগেট করা
router.navigate("home", { trigger: true });
router.navigate("about", { trigger: true });
router.navigate("contact/123", { trigger: true });

এখানে:

• initialize() ফাংশনটি রাউটার প্রথমবার ইনস্ট্যানশিয়েট হওয়ার সময় কল হবে।
• যখন আমরা navigate() ফাংশন ব্যবহার করে URL পরিবর্তন করি, তখন URL প্যাটার্নের সাথে মেলে এমন ক্যালব্যাক ফাংশনটি কল হয় (যেমন showHome, showAbout, বা showContact )।
• প্রতিটি ক্যালব্যাক ফাংশন URL এর সাথে সম্পর্কিত কনটেন্ট (যেমন, "Home Page", "About Page", "Contact ID") DOM-এ রেন্ডার করে।

4. Router এর Callback Functions তে Additional Logic

BackboneJS এর Router তে ক্যালব্যাক ফাংশনগুলির মধ্যে আপনি অতিরিক্ত লজিকও যোগ করতে পারেন। যেমন, আপনি রাউটের মধ্যে অটো রিডিরেকশন, ডেটা লোডিং, বা ইউজার অথেনটিকেশন চেক করতে পারেন।

উদাহরণ (অথেনটিকেশন চেক):

var AppRouter = Backbone.Router.extend({
    routes: {
        "dashboard": "showDashboard",
        "login": "showLogin"
    },

    showDashboard: function() {
        if (this.isUserLoggedIn()) {
            console.log("Welcome to the Dashboard!");
            $("#app").html("<h1>Dashboard</h1>");
        } else {
            console.log("User not logged in, redirecting to login...");
            this.navigate("login", { trigger: true });
        }
    },

    showLogin: function() {
        console.log("Please log in.");
        $("#app").html("<h1>Login Page</h1>");
    },

    isUserLoggedIn: function() {
        // এখানে আপনি আপনার অথেনটিকেশন চেক করতে পারেন
        return false; // উদাহরণস্বরূপ, ব্যবহারকারী লগ ইন করেনি
    }
});

var router = new AppRouter();
Backbone.history.start();

এখানে, showDashboard ক্যালব্যাক ফাংশনে ইউজারের লগ ইন স্টেট চেক করা হচ্ছে এবং যদি ইউজার লগ ইন না থাকে, তবে তাকে লগিন পৃষ্ঠায় রিডিরেক্ট করা হচ্ছে।

সারাংশ

BackboneJS এ Router ব্যবহার করে আপনি URL এর ভিত্তিতে বিভিন্ন পৃষ্ঠা বা ভিউ রেন্ডার করতে পারেন। এর মাধ্যমে আপনি:

• Routes এবং তাদের জন্য ক্যালব্যাক ফাংশন নির্ধারণ করতে পারেন।
• Events যেমন initialize এবং route ইভেন্ট ট্র্যাক করতে পারেন।
• Callback Functions এর মধ্যে অতিরিক্ত লজিক যেমন রিডিরেকশন, ডেটা লোডিং, বা অথেনটিকেশন চেক করতে পারেন।

BackboneJS এর Router খুবই শক্তিশালী এবং এর মাধ্যমে স্পা (Single Page Application) বা ওয়েব অ্যাপ্লিকেশনের বিভিন্ন পৃষ্ঠা ম্যানেজ করা সহজ হয়।