Custom Model এবং View তৈরি করা

BackboneJS একটি সহজ এবং কার্যকর ফ্রেমওয়ার্ক যা JavaScript অ্যাপ্লিকেশন তৈরি করতে সাহায্য করে। Custom Model এবং Custom View তৈরি করে আপনি আপনার অ্যাপ্লিকেশনকে আরও কার্যকরী এবং কাস্টমাইজডভাবে তৈরি করতে পারেন। Model এবং View এর সমন্বয়ের মাধ্যমে আপনি ডেটা এবং UI এর মধ্যে একটি সঠিক সমন্বয় তৈরি করতে পারেন।

এখানে, আমরা কিভাবে কাস্টম মডেল এবং ভিউ তৈরি করতে পারি, তা দেখব।

Custom Model তৈরি করা

BackboneJS এ মডেল তৈরি করার মাধ্যমে আপনি ডেটা ম্যানেজমেন্ট এবং ডেটা পরিবর্তনের জন্য কার্যকরী লজিক তৈরি করতে পারেন। মডেল সাধারণত ডেটা ধারণ করে এবং যখন ডেটা পরিবর্তিত হয়, তখন ভিউ সেই পরিবর্তন দেখতে পায়।

কাস্টম মডেল তৈরি করা

Backbone মডেল তৈরি করার জন্য Backbone.Model.extend() মেথড ব্যবহার করা হয়। মডেলটি সাধারণত ডেটা এবং মেথড ধারণ করে যা ডেটার উপর বিভিন্ন কার্যক্রম চালাতে পারে।

// Custom Book Model তৈরি করা
var Book = Backbone.Model.extend({
    // মডেলের ডিফল্ট ডেটা
    defaults: {
        title: 'Unknown Title',
        author: 'Unknown Author',
        year: 2020
    },

    // মডেল সেভ করার আগে কিছু চেক করা যেতে পারে
    initialize: function() {
        console.log('A new book model has been created!');
    },

    // Custom method: Get book info
    getBookInfo: function() {
        return this.get('title') + ' by ' + this.get('author') + ' (' + this.get('year') + ')';
    }
});

এখানে:

• defaults: মডেলের ডিফল্ট ডেটা। যদি আপনি নতুন মডেল তৈরি করেন, তবে এই ডেটাগুলি প্রাথমিকভাবে সেট করা হবে।
• initialize: যখন মডেলটি তৈরি হবে তখন এই ফাংশনটি কল হবে।
• getBookInfo(): একটি কাস্টম মেথড যা বইয়ের বিস্তারিত তথ্য ফিরিয়ে দেয়।

মডেল ইন্সট্যান্স তৈরি করা

var myBook = new Book({
    title: 'BackboneJS Essentials',
    author: 'John Doe',
    year: 2021
});

console.log(myBook.getBookInfo()); // "BackboneJS Essentials by John Doe (2021)"

Custom View তৈরি করা

BackboneJS এর View একটি ডেটার UI রেন্ডার করে এবং ইভেন্টগুলো হ্যান্ডেল করে। কাস্টম ভিউ তৈরি করে, আপনি আপনার মডেল থেকে ডেটা নিয়ে UI তে তা রেন্ডার করতে পারেন এবং ব্যবহারকারীর ইন্টারঅ্যাকশনের ভিত্তিতে অ্যাপ্লিকেশন আপডেট করতে পারেন।

কাস্টম ভিউ তৈরি করা

BackboneJS এ ভিউ তৈরি করার জন্য Backbone.View.extend() মেথড ব্যবহার করা হয়। ভিউ সাধারণত HTML রেন্ডার করার জন্য এবং ইভেন্ট হ্যান্ডলিংয়ের জন্য ব্যবহৃত হয়।

// Custom Book View তৈরি করা
var BookView = Backbone.View.extend({
    tagName: 'div',  // HTML ট্যাগ যা ভিউ হিসেবে তৈরি হবে
    className: 'book',  // CSS ক্লাস

    // টেমপ্লেট তৈরি করা
    template: _.template('<h2><%= title %></h2><p><%= author %></p><p><%= year %></p>'),

    initialize: function() {
        console.log('Book view initialized!');
        // মডেলের পরিবর্তন হলে ভিউ রেন্ডার হবে
        this.listenTo(this.model, 'change', this.render);
        this.render();  // প্রথমবার রেন্ডারিং
    },

    render: function() {
        // মডেলের ডেটা টেমপ্লেটে সন্নিবেশ করা
        this.$el.html(this.template(this.model.toJSON()));
        return this;
    }
});

এখানে:

• tagName: ভিউ হিসেবে কোন HTML ট্যাগ ব্যবহার করবেন তা নির্ধারণ করে।
• className: ভিউটিকে CSS ক্লাস অ্যাসাইন করে।
• template: Underscore.js এর টেমপ্লেটিং ফাংশন ব্যবহার করে একটি টেমপ্লেট তৈরি করা হয়।
• listenTo(): মডেলের change ইভেন্ট শোনার জন্য ব্যবহৃত হয়, যাতে মডেল পরিবর্তিত হলে ভিউ রেন্ডার হয়।

ভিউ ইন্সট্যান্স তৈরি করা

var myBookView = new BookView({
    model: myBook
});

// ভিউকে DOM এ যোগ করা
$('body').append(myBookView.el);

এখানে, myBookView.el এর মাধ্যমে আমাদের কাস্টম ভিউটি DOM এ যুক্ত করা হচ্ছে।

মডেল এবং ভিউ একসাথে ব্যবহার করা

আমরা এখন মডেল এবং ভিউ একসাথে ব্যবহার করতে পারি। যখন মডেলটির ডেটা পরিবর্তিত হবে, তখন ভিউ পুনরায় রেন্ডার হবে এবং নতুন ডেটা UI তে প্রদর্শিত হবে।

// মডেলের ডেটা পরিবর্তন করা
myBook.set({
    title: 'Advanced BackboneJS',
    author: 'Jane Doe',
    year: 2023
});

এখন, যখন myBook.set() কল করা হবে, তখন BookView এর render() মেথড স্বয়ংক্রিয়ভাবে কল হবে এবং UI তে নতুন ডেটা রেন্ডার হবে।

ইভেন্ট হ্যান্ডলিং

BackboneJS এ, ভিউতে ইভেন্ট হ্যান্ডলিং অত্যন্ত গুরুত্বপূর্ণ, কারণ এটি ইউজারের ইন্টারঅ্যাকশনগুলো (যেমন ক্লিক, সাবমিট, হোভার) ট্র্যাক করে এবং সেগুলোর উপর ভিত্তি করে অ্যাপ্লিকেশনকে প্রতিক্রিয়া জানাতে সাহায্য করে।

ইভেন্ট হ্যান্ডলিং উদাহরণ

var BookView = Backbone.View.extend({
    tagName: 'div',
    className: 'book',

    template: _.template('<h2><%= title %></h2><p><%= author %></p><p><%= year %></p><button class="edit">Edit</button>'),

    events: {
        'click .edit': 'editBook'  // যখন "Edit" বাটনে ক্লিক হবে
    },

    initialize: function() {
        this.listenTo(this.model, 'change', this.render);
        this.render();
    },

    render: function() {
        this.$el.html(this.template(this.model.toJSON()));
        return this;
    },

    editBook: function() {
        // মডেলের ডেটা পরিবর্তন করা
        var newTitle = prompt('Enter new title:', this.model.get('title'));
        if (newTitle) {
            this.model.set('title', newTitle);  // মডেল আপডেট করা
        }
    }
});

এখানে, events অবজেক্টে ক্লিক ইভেন্ট হ্যান্ডল করা হয়েছে, যা editBook মেথডকে কল করে, এবং ব্যবহারকারীর ইনপুটের ভিত্তিতে মডেলের ডেটা পরিবর্তিত হয়।

সারাংশ

BackboneJS এ Custom Model এবং Custom View তৈরি করার মাধ্যমে আপনি আপনার অ্যাপ্লিকেশনকে কাস্টমাইজডভাবে তৈরি করতে পারেন। মডেল ডেটার স্টোরেজ হিসেবে কাজ করে, এবং ভিউ UI রেন্ডারিং এবং ইভেন্ট হ্যান্ডলিং করে।

• Model: ডেটা ধারণ করে এবং কাস্টম মেথড পরিচালনা করে।
• View: UI রেন্ডার করে এবং ব্যবহারকারীর ইন্টারঅ্যাকশন হ্যান্ডল করে।
• listenTo(): মডেল পরিবর্তিত হলে ভিউ রেন্ডার হয়।

এটি ব্যবহার করে আপনি আপনার অ্যাপ্লিকেশনকে আরও ডায়নামিক এবং ইন্টারঅ্যাকটিভ করতে পারবেন।