টেমপ্লেট রিফ্রেশ এবং Data Binding

BackboneJS একটি মডেল-ভিউ-কন্ট্রোলার (MVC) ফ্রেমওয়ার্ক, যা ডাইনামিক ইউজার ইন্টারফেস তৈরিতে সহায়ক। তবে, টেমপ্লেট রিফ্রেশ এবং Data Binding এর মতো ফিচার সরাসরি BackboneJS এর ভিতরে নেই, তাই আপনাকে কিছু কাস্টম লজিক ব্যবহার করতে হয় ডেটা ও ভিউয়ের মধ্যে সিঙ্ক্রোনাইজেশন (synchronization) বজায় রাখতে। যদিও BackboneJS নিজেই ডেটা বাইন্ডিং এবং টেমপ্লেট রিফ্রেশ করার জন্য বিল্ট-ইন কোনো ব্যবস্থা সরবরাহ করে না, তবে আপনি সহজেই এতে কাস্টম সমাধান তৈরি করতে পারেন।

চলুন, এদের নিয়ে বিস্তারিত আলোচনা করি।

1. টেমপ্লেট রিফ্রেশ (Template Refresh)

টেমপ্লেট রিফ্রেশ মূলত ভিউ (View) এর পুনরায় রেন্ডারিং প্রক্রিয়া, যা ডেটা পরিবর্তনের পর UI তে নতুন ডেটা প্রদর্শন করে। BackboneJS এ, মডেল বা কোলেকশনের ডেটা পরিবর্তন হলে আপনি render() মেথড ব্যবহার করে ভিউটি পুনরায় রেন্ডার করতে পারেন।

টেমপ্লেট রিফ্রেশ করার ধাপ:

• প্রথমে একটি টেমপ্লেট তৈরি করুন। আপনি Underscore.js এর template() ফাংশন ব্যবহার করতে পারেন যা আপনাকে HTML টেমপ্লেট এবং ডেটা একসাথে রেন্ডার করার সুবিধা দেয়।
• তারপর, যখন মডেলের ডেটা পরিবর্তিত হবে, তখন আপনি ভিউটি রিফ্রেশ করতে পারবেন।

উদাহরণ:

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

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

    initialize: function() {
        this.listenTo(this.model, 'change', this.render); // মডেল চেঞ্জ হলে রেন্ডার হবে
    },

    render: function() {
        var template = _.template($('#bookTemplate').html()); // Underscore টেমপ্লেট
        this.$el.html(template(this.model.toJSON())); // মডেল ডেটা টেমপ্লেটে ইনজেক্ট করা
        return this; // চেইনেবল রিটার্ন
    }
});

// HTML টেমপ্লেট
<script type="text/template" id="bookTemplate">
    <h2><%= title %></h2>
    <p>Author: <%= author %></p>
</script>

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

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

// ভিউ রেন্ডার করা
bookView.render();

// মডেলের ডেটা আপডেট করলে টেমপ্লেট রিফ্রেশ হবে
myBook.set({ title: 'Mastering BackboneJS', author: 'Jane Doe' });

এখানে, যখন মডেলের title বা author পরিবর্তিত হয়, তখন render() মেথড কল হবে এবং টেমপ্লেট রিফ্রেশ হবে, নতুন ডেটা প্রদর্শিত হবে।

2. Data Binding (ডেটা বাইন্ডিং)

BackboneJS এ ডেটা বাইন্ডিং সরাসরি অন্তর্ভুক্ত না হলেও, আপনি model-to-view এবং view-to-model ডেটা বাইন্ডিং তৈরি করতে পারেন।

Model-to-View Binding:

এটি তখন হয় যখন মডেল থেকে ডেটা নিয়ে ভিউতে রেন্ডার করা হয়। BackboneJS এ আপনি listenTo() বা on() মেথড ব্যবহার করে মডেলের পরিবর্তন শুনতে পারেন এবং সেই অনুযায়ী ভিউ আপডেট করতে পারেন।

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

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

    initialize: function() {
        this.listenTo(this.model, 'change', this.render); // মডেল পরিবর্তন হলে রেন্ডার হবে
    },

    render: function() {
        var template = _.template($('#bookTemplate').html());
        this.$el.html(template(this.model.toJSON())); // টেমপ্লেট রেন্ডার
    }
});

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

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

// ভিউ রেন্ডার করা
bookView.render();

এখানে, যখন মডেল এর title বা author পরিবর্তিত হয়, তখন render() মেথড স্বয়ংক্রিয়ভাবে কল হবে এবং UI আপডেট হবে।

View-to-Model Binding:

এটি তখন হয় যখন আপনি ভিউ থেকে ডেটা মডেলে আপডেট করেন। আপনি events প্রপার্টি ব্যবহার করে ইউজারের ইন্টারঅ্যাকশন (যেমন বাটন ক্লিক) ধরতে পারেন এবং সেই অনুযায়ী মডেল আপডেট করতে পারেন।

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

    events: {
        'click .update-title': 'updateTitle' // বাটন ক্লিক করলে title আপডেট হবে
    },

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

    render: function() {
        var template = _.template($('#bookTemplate').html());
        this.$el.html(template(this.model.toJSON()));
    },

    updateTitle: function() {
        var newTitle = prompt('Enter new title:');
        this.model.set('title', newTitle); // মডেল আপডেট
    }
});

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

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

// ভিউ রেন্ডার করা
bookView.render();

এখানে, updateTitle ফাংশনটি বাটন ক্লিক করলে মডেলের title আপডেট করবে, এবং সেই পরিবর্তন ভিউতে রিফ্রেশ হবে।

3. BackboneJS এ কাস্টম Data Binding

যদিও BackboneJS সরাসরি ডেটা বাইন্ডিং সাপোর্ট করে না, আপনি কাস্টম ডেটা বাইন্ডিং ব্যবস্থাও তৈরি করতে পারেন। এর জন্য সাধারণত set() এবং get() মেথড ব্যবহার করা হয়। তবে, যদি আপনি আরও উন্নত ডেটা বাইন্ডিং চান, তাহলে আপনাকে Backbone Model এ কাস্টম ইভেন্ট ব্যবহার করে ভিউয়ের সাথে সিঙ্ক্রোনাইজ করতে হবে।

কাস্টম Data Binding উদাহরণ:

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

    // ডেটা পরিবর্তন হলে ইভেন্ট ট্রিগার
    initialize: function() {
        this.on('change', this.notifyView);
    },

    notifyView: function() {
        console.log('Model data has changed');
    }
});

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

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

    render: function() {
        var template = _.template($('#bookTemplate').html());
        this.$el.html(template(this.model.toJSON()));
    }
});

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

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

// ভিউ রেন্ডার করা
bookView.render();

এখানে notifyView মেথডটি মডেল পরিবর্তন হলে কল হবে, এবং আপনি এখানে ভিউকে সিঙ্ক্রোনাইজ করতে পারেন।

সারাংশ

BackboneJS তে টেমপ্লেট রিফ্রেশ এবং Data Binding এর জন্য কিছু কাস্টম সমাধান ব্যবহার করতে হয়।

• টেমপ্লেট রিফ্রেশ এর জন্য ভিউ রেন্ডারিং মেথডে মডেল ডেটা ব্যবহার করা হয়, যা ইউজারের ইন্টারঅ্যাকশন বা মডেল পরিবর্তন অনুযায়ী আপডেট হয়।
• Data Binding এর জন্য, মডেল ও ভিউয়ের মধ্যে ইভেন্ট হ্যান্ডলিং এবং listenTo() মেথড ব্যবহার করা হয়, যাতে মডেল বা ভিউ পরিবর্তিত হলে অন্যটি স্বয়ংক্রিয়ভাবে সিঙ্ক্রোনাইজ হয়।

BackboneJS তে সরাসরি বিল্ট-ইন ডেটা বাইন্ডিং নেই, তবে কাস্টম লজিক দিয়ে আপনি এটি সহজেই বাস্তবায়ন করতে পারেন।