BackboneJS Router এবং URL Mapping

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) তৈরি করতে পারবেন।