BackboneJS এর Views মডেল এবং ইউজার ইন্টারফেস (UI) এর মধ্যে যোগাযোগ স্থাপন করে। এই Views তে ডেটা রেন্ডার করতে Templates ব্যবহার করা হয়, এবং সাধারণত Underscore.js টেমপ্লেট সিস্টেম BackboneJS এর সঙ্গে ব্যবহৃত হয়। Underscore.js এর টেমপ্লেট ফিচার ভিউর ডেটা ডাইনামিকভাবে রেন্ডার করার জন্য অত্যন্ত উপকারী।
Views এবং Templates কি?
- Views: BackboneJS এর Views ইউজার ইন্টারফেস (UI) উপাদানগুলোর প্রতিনিধিত্ব করে। এটি মডেল থেকে ডেটা নিয়ে, তা DOM (Document Object Model)-এ রেন্ডার করে।
- Templates: Templates হল HTML কন্টেন্ট যেখানে ডেটার প্লেসহোল্ডার থাকে, যেগুলোকে runtime এ ডাইনামিকভাবে Underscore.js ব্যবহার করে পূর্ণ করা হয়। এর মাধ্যমে UI রেন্ডারিং আরো ফ্লেক্সিবল এবং সহজ হয়।
Underscore.js টেমপ্লেট সিস্টেম
Underscore.js এর টেমপ্লেট সিস্টেম সরল এবং শক্তিশালী। এটি JavaScript কোডের মধ্যে HTML প্লেসহোল্ডার (যেমন <%= ... %>) ব্যবহার করে ডেটা ইনজেক্ট করতে সাহায্য করে।
Underscore.js এর টেমপ্লেট ব্যবহার করতে হলে প্রথমে আপনার HTML ফাইলে Underscore.js ইমপোর্ট করতে হবে।
Views এর সাথে Templates ব্যবহার করার প্রক্রিয়া
ধাপ 1: HTML ফাইলে Underscore.js এবং Backbone.js ইনক্লুড করা
প্রথমে, HTML ফাইলে Underscore.js এবং Backbone.js সঠিকভাবে লোড করতে হবে।
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>BackboneJS Template Example</title>
<!-- jQuery CDN -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<!-- Underscore.js CDN -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.13.1/underscore-min.js"></script>
<!-- BackboneJS CDN -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.5.0/backbone-min.js"></script>
</head>
<body>
<h1>Hello, BackboneJS with Templates!</h1>
<!-- Template -->
<script type="text/template" id="book-template">
<h2><%= title %></h2>
<p>Author: <%= author %></p>
</script>
<div id="book-view"></div>
<script>
// BackboneJS কোড এখানে লিখুন
</script>
</body>
</html>
ধাপ 2: Backbone View তৈরি করা
এখন, আমরা একটি Backbone View তৈরি করব, যা টেমপ্লেট থেকে ডেটা রেন্ডার করবে। Backbone View এর মধ্যে render() মেথড ব্যবহার করে আমরা টেমপ্লেট রেন্ডার করব।
// Book View তৈরি করা
var BookView = Backbone.View.extend({
// টেমপ্লেট সিলেক্টর
template: _.template($('#book-template').html()),
// রেন্ডার মেথড
render: function() {
// মডেল ডেটা টেমপ্লেটে প্রেরণ করে HTML তৈরি করা
var html = this.template(this.model.toJSON());
// ভিউয়ের DOM-এ রেন্ডার করা
this.$el.html(html);
return this;
}
});
এখানে, _.template() ফাংশন ব্যবহার করা হয়েছে, যা HTML টেমপ্লেটকে একটি ফাংশনে পরিণত করে এবং এই ফাংশনটি মডেল থেকে ডেটা নিয়ে টেমপ্লেটের প্লেসহোল্ডারে ভ্যালু ইনজেক্ট করে।
ধাপ 3: মডেল তৈরি করা
এখন, আমাদের একটি Backbone Model তৈরি করতে হবে, যেটি বইয়ের তথ্য ধারণ করবে (যেমন title এবং author):
// Book Model তৈরি করা
var Book = Backbone.Model.extend({
defaults: {
title: 'Unknown Book',
author: 'Unknown Author'
}
});
ধাপ 4: মডেল এবং ভিউ ব্যবহার করা
এখন, আমরা মডেল এবং ভিউ তৈরি করে ভিউকে ডোমে রেন্ডার করব।
// মডেল ইনস্ট্যান্স তৈরি করা
var myBook = new Book({ title: 'BackboneJS for Beginners', author: 'John Doe' });
// ভিউ ইনস্ট্যান্স তৈরি করা
var bookView = new BookView({ model: myBook });
// ভিউ রেন্ডার করে ডিভে যুক্ত করা
$('#book-view').html(bookView.render().el);
এখন, যখন আপনি এই কোডটি চালাবেন, myBook মডেলটি BookView এর মাধ্যমে টেমপ্লেটে রেন্ডার হবে এবং ফলস্বরূপ, ব্রাউজারে বইয়ের শিরোনাম ও লেখকের নাম দেখা যাবে।
পূর্ণ কোড উদাহরণ
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>BackboneJS Template Example</title>
<!-- jQuery CDN -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<!-- Underscore.js CDN -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.13.1/underscore-min.js"></script>
<!-- BackboneJS CDN -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.5.0/backbone-min.js"></script>
</head>
<body>
<h1>Hello, BackboneJS with Templates!</h1>
<!-- Template -->
<script type="text/template" id="book-template">
<h2><%= title %></h2>
<p>Author: <%= author %></p>
</script>
<div id="book-view"></div>
<script>
// Book Model তৈরি করা
var Book = Backbone.Model.extend({
defaults: {
title: 'Unknown Book',
author: 'Unknown Author'
}
});
// Book View তৈরি করা
var BookView = Backbone.View.extend({
// টেমপ্লেট সিলেক্টর
template: _.template($('#book-template').html()),
// রেন্ডার মেথড
render: function() {
var html = this.template(this.model.toJSON());
this.$el.html(html);
return this;
}
});
// মডেল ইনস্ট্যান্স তৈরি করা
var myBook = new Book({ title: 'BackboneJS for Beginners', author: 'John Doe' });
// ভিউ ইনস্ট্যান্স তৈরি করা
var bookView = new BookView({ model: myBook });
// ভিউ রেন্ডার করে ডিভে যুক্ত করা
$('#book-view').html(bookView.render().el);
</script>
</body>
</html>
সারাংশ
BackboneJS এর Views এবং Underscore.js টেমপ্লেট সিস্টেম একসাথে ব্যবহার করলে ডাইনামিক ডেটা রেন্ডার করা সহজ হয়।
- Views BackboneJS এর ডেটা এবং UI এর মধ্যে সেতুবন্ধন স্থাপন করে।
- Underscore.js Templates ডেটা রেন্ডারিংকে আরও সহজ এবং দ্রুত করে তোলে।
এই পদ্ধতি ব্যবহার করে আপনি আপনার অ্যাপ্লিকেশনকে আরও ইন্টারঅ্যাকটিভ এবং ডাইনামিক করতে পারবেন।
Read more
