Router এর Events এবং Callback Functions

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) বা ওয়েব অ্যাপ্লিকেশনের বিভিন্ন পৃষ্ঠা ম্যানেজ করা সহজ হয়।