Multiple Views এবং Nested Views পরিচালনা

BackboneJS এ Multiple Views এবং Nested Views পরিচালনা করার জন্য, আপনি একাধিক ভিউ তৈরি করতে পারেন এবং তাদের মধ্যে সম্পর্ক স্থাপন করতে পারেন। প্রতিটি ভিউ সাধারণত একটি নির্দিষ্ট অংশের জন্য দায়িত্বশীল হয় এবং একাধিক ভিউ একসাথে কাজ করে আপনার অ্যাপ্লিকেশনের বিভিন্ন UI উপাদান পরিচালনা করতে সাহায্য করে।

1. Multiple Views (একাধিক ভিউ)

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

Multiple Views তৈরি করার উদাহরণ:

// Book মডেল
var Book = Backbone.Model.extend({
    defaults: {
        title: 'Unknown',
        author: 'Unknown'
    }
});

// BookView
var BookView = Backbone.View.extend({
    el: '#book', // book section এর জন্য HTML এলিমেন্ট

    render: function() {
        this.$el.html('<h2>' + this.model.get('title') + '</h2><p>' + this.model.get('author') + '</p>');
        return this;
    }
});

// AuthorView
var AuthorView = Backbone.View.extend({
    el: '#author', // author section এর জন্য HTML এলিমেন্ট

    render: function() {
        this.$el.html('<h3>Author: ' + this.model.get('author') + '</h3>');
        return this;
    }
});

// মডেল তৈরি করা
var myBook = new Book({ title: 'BackboneJS Basics', author: 'John Doe' });

// BookView তৈরি করা
var bookView = new BookView({ model: myBook });
bookView.render();

// AuthorView তৈরি করা
var authorView = new AuthorView({ model: myBook });
authorView.render();

এখানে, দুটি আলাদা ভিউ (BookView এবং AuthorView) তৈরি করা হয়েছে, যেখানে BookView বইয়ের শিরোনাম এবং লেখক প্রদর্শন করবে, এবং AuthorView শুধু লেখকের নাম প্রদর্শন করবে।

2. Nested Views (নেস্টেড ভিউ)

Nested Views তখন ব্যবহৃত হয় যখন একটি ভিউ আরেকটি ভিউকে রেন্ডার করে বা তার মধ্যে অন্য ভিউয়ের উপাদান থাকে। BackboneJS এ, আপনি একটি ভিউকে অন্য ভিউয়ের ভিতরে রাখতে পারেন, যা মূল ভিউতে উপাদানগুলো (যেমন, লিস্ট, টেবিল, বা অন্য ভিউ) প্রদর্শন করে।

Nested Views তৈরি করার উদাহরণ:

// Book মডেল
var Book = Backbone.Model.extend({
    defaults: {
        title: 'Unknown',
        author: 'Unknown'
    }
});

// BookView
var BookView = Backbone.View.extend({
    tagName: 'div', // div tag দিয়ে book view তৈরি করা
    className: 'book-item', // CSS ক্লাস যোগ করা

    render: function() {
        this.$el.html('<h2>' + this.model.get('title') + '</h2><p>' + this.model.get('author') + '</p>');
        return this;
    }
});

// BookListView (Nested View)
var BookListView = Backbone.View.extend({
    el: '#book-list', // বইয়ের লিস্ট প্রদর্শন করার জন্য HTML এলিমেন্ট

    render: function() {
        var self = this;
        // প্রতি বইয়ের জন্য BookView তৈরি করা
        this.collection.each(function(book) {
            var bookView = new BookView({ model: book });
            self.$el.append(bookView.render().el); // BookView যোগ করা
        });
        return this;
    }
});

// বইয়ের কোলেকশন
var books = new Backbone.Collection([
    new Book({ title: 'BackboneJS Basics', author: 'John Doe' }),
    new Book({ title: 'Mastering BackboneJS', author: 'Jane Doe' })
]);

// BookListView তৈরি করা
var bookListView = new BookListView({ collection: books });
bookListView.render();

এখানে, BookListView একটি Nested View যা BookView কে তার মধ্যে রেন্ডার করে। BookListView সমস্ত বইয়ের একটি লিস্ট তৈরি করে এবং প্রতিটি বইয়ের জন্য BookView রেন্ডার করে।

3. Event Propagation in Nested Views (নেস্টেড ভিউতে ইভেন্ট প্রোপাগেশন)

BackboneJS এ ইভেন্ট প্রোপাগেশন (Event Propagation) ব্যবস্থাপনাও গুরুত্বপূর্ণ, বিশেষ করে যখন একটি ভিউ আরেকটি ভিউর মধ্যে থাকে। মূল ভিউ থেকে সাব-ভিউ বা নেস্টেড ভিউতে ইভেন্টগুলি প্রোপাগেট হতে পারে। যদি সাব-ভিউতে কোনো পরিবর্তন ঘটে, তাহলে তার প্রভাব মূল ভিউতে পড়তে পারে।

Nested Views এ ইভেন্ট প্রোপাগেশন:

// ItemView (নেস্টেড ভিউ)
var ItemView = Backbone.View.extend({
    tagName: 'li', // list item

    events: {
        'click': 'onClick' // item এ ক্লিক করলে onClick ফাংশন কল হবে
    },

    onClick: function() {
        this.trigger('item:clicked', this); // সাব ভিউ থেকে ইভেন্ট ট্রিগার
    },

    render: function() {
        this.$el.html(this.model.get('name'));
        return this;
    }
});

// ListView (মূল ভিউ)
var ListView = Backbone.View.extend({
    tagName: 'ul',

    initialize: function() {
        this.listenTo(this.collection, 'item:clicked', this.onItemClicked); // ইভেন্ট শোনা হচ্ছে
    },

    onItemClicked: function(itemView) {
        alert('Item clicked: ' + itemView.model.get('name'));
    },

    render: function() {
        var self = this;
        this.collection.each(function(item) {
            var itemView = new ItemView({ model: item });
            self.$el.append(itemView.render().el);
        });
        return this;
    }
});

// কোলেকশন তৈরি
var items = new Backbone.Collection([
    { name: 'Item 1' },
    { name: 'Item 2' },
    { name: 'Item 3' }
]);

// ListView তৈরি
var listView = new ListView({ collection: items });

// রেন্ডার করা
$('#list-container').html(listView.render().el);

এখানে, যখন কোনো আইটেমের ওপর ক্লিক করা হয়, তখন ItemView item:clicked ইভেন্ট ট্রিগার করে এবং ListView এই ইভেন্টকে শোনে এবং রেসপন্ড করে।

4. Multiple Views এবং Nested Views এর মধ্যে সম্পর্ক স্থাপন

BackboneJS এ একাধিক ভিউ এবং নেস্টেড ভিউগুলির মধ্যে সম্পর্ক স্থাপন করার জন্য Event Listeners, rendering, এবং DOM Manipulation এর মাধ্যমে বিভিন্ন ভিউ একে অপরের সাথে যোগাযোগ করে। আপনি যখন নেস্টেড ভিউ ব্যবহার করেন, তখন সেগুলি মূল ভিউ থেকে সাব-ভিউতে ডেটা বা ইভেন্ট পাঠাতে পারে।

সারাংশ

• Multiple Views: একাধিক ভিউ তৈরি করতে পারেন যা আলাদা UI উপাদান পরিচালনা করে, এবং তারা একসাথে কাজ করতে পারে।
• Nested Views: এক ভিউ আরেকটি ভিউর মধ্যে থাকতে পারে, যেখানে একটি ভিউ অন্য ভিউ রেন্ডার করতে পারে। এটি DOM এ উপাদান তৈরি এবং একাধিক ভিউকে সিঙ্ক্রোনাইজ করার কাজ সহজ করে।
• Event Propagation: Nested Views এ ইভেন্ট প্রোপাগেশন ব্যবহার করে একটি ভিউ থেকে অন্য ভিউতে ইভেন্ট প্রেরণ করা যায়, যা অ্যাপ্লিকেশনটির অভ্যন্তরীণ ইন্টারঅ্যাকশন সহজ করে।

BackboneJS এ Multiple Views এবং Nested Views ব্যবহারের মাধ্যমে আপনার অ্যাপ্লিকেশনের ইউআই পরিচালনা করা সহজ এবং আরো মডুলার ও রিইউজেবল হয়।