BackboneJS এর সাথে Underscore.js Templates ব্যবহার

BackboneJS এবং Underscore.js একসাথে ব্যবহার করা হয় সাধারণত ডেটা রেন্ডারিং এবং টেমপ্লেটিং এর জন্য। Underscore.js-এর template ফিচার BackboneJS এর সাথে একত্রে ব্যবহৃত হয়ে ভিউ তৈরির প্রক্রিয়া অনেক সহজ করে তোলে। আপনি যখন BackboneJS ব্যবহার করেন, তখন Model থেকে ডেটা নিয়ে সেই ডেটা Underscore.js Templates এর মাধ্যমে View এ রেন্ডার করা হয়।

Underscore.js-এ টেমপ্লেটিং এর মাধ্যমে আপনি ডাইনামিক HTML তৈরি করতে পারবেন, যেখানে মডেল থেকে পাওয়া ডেটা ভিউতে প্রবাহিত করা হবে।

1. Underscore.js Templates এর মৌলিক ধারণা

Underscore.js এর template ফিচার একটি template engine হিসেবে কাজ করে। এটি ডেটাকে HTML টেমপ্লেটের মধ্যে সন্নিবেশিত করে, এবং সেই HTML কে ব্রাউজারে রেন্ডার করে দেয়।

Underscore.js টেমপ্লেট ব্যবহারের মূল কাঠামো:

• Underscore.js টেমপ্লেটগুলি <%= %> সিনট্যাক্স ব্যবহার করে ডেটাকে টেমপ্লেটের মধ্যে ইন্সার্ট করে।
• আপনি <%= data %> বা <%- data %> ব্যবহার করতে পারেন, যেখানে প্রথমটি HTML ইস্কেপ করে এবং দ্বিতীয়টি তা না করে।

2. BackboneJS এর সাথে Underscore.js Templates ব্যবহার

BackboneJS-এ, আপনি View এর মধ্যে Underscore.js Templates ব্যবহার করে মডেলের ডেটা রেন্ডার করতে পারেন। BackboneJS এর render() মেথডে টেমপ্লেট ইঞ্জিন ব্যবহার করা হয়। এই পদ্ধতিতে, আপনি মডেল থেকে ডেটা নিয়ে তা টেমপ্লেটের মধ্যে প্রবাহিত করবেন এবং সেই অনুযায়ী ভিউকে আপডেট করবেন।

উদাহরণ: BackboneJS-এ Underscore.js Templates ব্যবহার করা

// Backbone Model তৈরি করা
var Book = Backbone.Model.extend({
    defaults: {
        title: 'Unknown Book',
        author: 'Unknown Author'
    }
});

// Backbone View তৈরি করা
var BookView = Backbone.View.extend({
    el: '#book-container',

    initialize: function() {
        this.render();
    },

    render: function() {
        // Underscore.js টেমপ্লেট তৈরি করা
        var template = _.template('<h2><%= title %></h2><p><%= author %></p>');

        // টেমপ্লেটের মাধ্যমে ডেটা রেন্ডার করা
        var html = template(this.model.toJSON());

        // ভিউতে HTML যুক্ত করা
        this.$el.html(html);
    }
});

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

// ভিউ তৈরি করা এবং মডেল সেট করা
var myBookView = new BookView({ model: myBook });

কোডের ব্যাখ্যা:

1. Model: Book নামক মডেল তৈরি করা হয়েছে, যেখানে ডিফল্টভাবে title এবং author প্রপার্টি রয়েছে।
2. View: BookView নামক একটি ভিউ তৈরি করা হয়েছে, যা মডেল থেকে ডেটা নিয়ে তাকে Underscore.js template এর মাধ্যমে HTML এ রেন্ডার করবে।
3. Rendering: _.template() মেথড ব্যবহার করে টেমপ্লেট তৈরি করা হয়েছে এবং মডেলের ডেটা (this.model.toJSON()) টেমপ্লেটে পাঠানো হয়েছে।
4. Result: টেমপ্লেট রেন্ডার হওয়ার পর HTML ব্রাউজারে দেখানো হবে।

এখানে, _.template() মেথডটি Underscore.js থেকে আসে এবং এটি একটি টেমপ্লেট ফাংশন তৈরি করে যা আপনাকে ডেটা ইন্সার্ট করার জন্য ব্যবহার করা যায়।

3. Dynamic Data Binding with Templates

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

উদাহরণ: Dynamic Data Binding with Underscore.js Templates

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

// Backbone View with Template
var BookView = Backbone.View.extend({
    el: '#book-container',

    initialize: function() {
        this.listenTo(this.model, 'change', this.render); // Listen to changes in model
        this.render(); // Initial render
    },

    render: function() {
        // Underscore.js Template
        var template = _.template('<h2><%= title %></h2><p><%= author %></p>');
        var html = template(this.model.toJSON());
        this.$el.html(html);
    }
});

// Create a new book model
var myBook = new Book({ title: 'BackboneJS in Action', author: 'Jane Doe' });

// Create a view and associate it with the model
var myBookView = new BookView({ model: myBook });

// Update model data and observe view update
myBook.set({ title: 'BackboneJS Advanced', author: 'Jane Doe' });
// The view will automatically update due to the 'change' event listener

এখানে, BookView ভিউটি মডেলের change ইভেন্ট শোনে। যখন মডেলের ডেটা পরিবর্তিত হয়, তখন render() মেথড স্বয়ংক্রিয়ভাবে কল হয় এবং নতুন ডেটা দিয়ে ভিউটি আপডেট হয়।

4. Using External Templates (আন্তরিক টেমপ্লেট ফাইল)

কখনও কখনও টেমপ্লেটগুলি JavaScript ফাইলের মধ্যে রাখা কঠিন হতে পারে, বিশেষত যখন টেমপ্লেট অনেক বড় হয়। এর জন্য আপনি বাইরের HTML ফাইল ব্যবহার করতে পারেন যেখানে টেমপ্লেট রাখা থাকে।

উদাহরণ: External Template ব্যবহার করা

<!-- HTML ফাইলের মধ্যে টেমপ্লেট -->
<script type="text/template" id="book-template">
    <h2><%= title %></h2>
    <p><%= author %></p>
</script>

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

// Backbone View
var BookView = Backbone.View.extend({
    el: '#book-container',

    initialize: function() {
        this.render();
    },

    render: function() {
        // বাইরের HTML টেমপ্লেট ফাইল থেকে টেমপ্লেটটি লোড করা
        var template = _.template($('#book-template').html());

        // টেমপ্লেটের মাধ্যমে ডেটা রেন্ডার করা
        var html = template(this.model.toJSON());

        // ভিউতে HTML যুক্ত করা
        this.$el.html(html);
    }
});

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

// ভিউ তৈরি করা
var myBookView = new BookView({ model: myBook });

এখানে, টেমপ্লেটটি #book-template ID দিয়ে HTML ফাইলে রাখা হয়েছে, এবং _.template() মেথডের মাধ্যমে তা JavaScript কোডে লোড করা হয়েছে।

সারাংশ

BackboneJS এর সাথে Underscore.js Templates ব্যবহার করলে ডাইনামিক HTML তৈরি করা অনেক সহজ হয়ে যায়। আপনি মডেল থেকে ডেটা নিয়ে সেটা Underscore.js Template-এর মাধ্যমে রেন্ডার করতে পারবেন। এটি Single Page Applications (SPA) তৈরির জন্য খুবই কার্যকরী। BackboneJS ভিউ এবং Underscore.js টেমপ্লেটের সাহায্যে আপনি সুন্দর ও ডাইনামিক ইউজার ইন্টারফেস তৈরি করতে পারবেন।

• Underscore.js Templates BackboneJS এর ভিউতে মডেল ডেটা রেন্ডার করার জন্য একটি শক্তিশালী টুল।
• Dynamic Binding এর মাধ্যমে মডেল ডেটার পরিবর্তন হলে ভিউ আপডেট হয়।
• বাইরের HTML ফাইল থেকে টেমপ্লেট লোড করে কোডের রিডেবিলিটি ও রিইউজেবিলিটি বৃদ্ধি করা যায়।