BackboneJS ব্যবহার করে একটি বেসিক অ্যাপ্লিকেশন তৈরি করতে হলে আপনাকে Model, View, Collection, এবং Router এই চারটি মূল কনসেপ্ট সম্পর্কে ধারণা থাকতে হবে। এখানে একটি খুব সহজ To-Do List অ্যাপ্লিকেশন তৈরি করার উদাহরণ দেওয়া হলো, যেখানে আমরা Model, View, এবং Collection ব্যবহার করব।
1. প্রয়োজনীয় ফাইল এবং ডিপেনডেন্সি
প্রথমে, আপনাকে jQuery, Underscore.js, এবং Backbone.js CDN লিঙ্কগুলো আপনার HTML ফাইলে যুক্ত করতে হবে। নিচে দেওয়া হলো পুরো অ্যাপ্লিকেশনের জন্য প্রয়োজনীয় HTML ফাইল:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>BackboneJS To-Do List</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>To-Do List</h1>
<!-- To-Do List Display Area -->
<ul id="todo-list"></ul>
<h3>Add a New Task:</h3>
<input type="text" id="new-task">
<button id="add-task">Add Task</button>
<script src="app.js"></script>
</body>
</html>
2. Model তৈরি করা
BackboneJS এ Model ব্যবহার করে আপনার ডেটা মডেল তৈরি করতে হয়। এখানে আমরা একটি Task মডেল তৈরি করব যা একটি টাস্কের নাম এবং স্ট্যাটাস (completeness) ধারণ করবে।
// app.js
// Task Model
var Task = Backbone.Model.extend({
defaults: {
name: '',
completed: false
},
// টাস্ককে সম্পূর্ণ বা অসম্পূর্ণ হিসেবে সেট করার জন্য একটি মেথড
toggleCompleted: function() {
this.save({ completed: !this.get('completed') });
}
});
3. Collection তৈরি করা
Collection একটি গ্রুপ অব মডেল (Model) রক্ষণাবেক্ষণ করে এবং তা একটি অ্যারে বা তালিকা হিসেবে কাজ করে। এখানে আমরা Tasks নামে একটি collection তৈরি করব।
// Task Collection
var TaskList = Backbone.Collection.extend({
model: Task
});
4. View তৈরি করা
View BackboneJS এর জন্য একটি গুরুত্বপূর্ণ কনসেপ্ট, যা মডেল এবং ভিউয়ের মধ্যে ইন্টারঅ্যাকশন তৈরি করে। View একটি DOM উপাদানকে মডেল বা কন্ট্রোলারের উপর ভিত্তি করে আপডেট করে। এখানে আমরা দুটি ভিউ তৈরি করব:
- একটি টাস্কের জন্য ভিউ (TaskView)
- পুরো টাস্ক লিস্টের জন্য ভিউ (AppView)
// Task View
var TaskView = Backbone.View.extend({
tagName: 'li', // প্রতিটি টাস্ক <li> হিসেবে দেখানো হবে
// টাস্কের HTML কোড তৈরি করা
template: _.template('<%- name %> <input type="checkbox" <%= completed ? "checked" : "" %>>'),
events: {
'click input': 'toggleTask' // টাস্কে ক্লিক করলে টাস্ক সম্পূর্ণ বা অসম্পূর্ণ হবে
},
initialize: function() {
this.listenTo(this.model, 'change', this.render); // মডেল চেঞ্জ হলে ভিউ আপডেট হবে
},
render: function() {
this.$el.html(this.template(this.model.toJSON())); // মডেল থেকে ডেটা এনে টেমপ্লেটের মধ্যে রাখবে
return this;
},
toggleTask: function() {
this.model.toggleCompleted(); // টাস্ক স্ট্যাটাস পরিবর্তন করবে
}
});
// App View (সম্পূর্ণ টাস্ক লিস্ট দেখানোর জন্য)
var AppView = Backbone.View.extend({
el: '#todo-list', // টাস্ক লিস্টটি যেখানে দেখানো হবে
events: {
'click #add-task': 'addTask' // নতুন টাস্ক যোগ করার জন্য ইভেন্ট
},
initialize: function() {
this.collection = new TaskList(); // একটি নতুন টাস্ক লিস্ট তৈরি
this.listenTo(this.collection, 'add', this.render); // নতুন টাস্ক যোগ হলে লিস্ট রেন্ডার হবে
},
render: function() {
this.$el.empty(); // লিস্ট রেন্ডার করার আগে পুরানো টাস্কগুলো মুছে ফেলবে
// সব টাস্ক ভিউ রেন্ডার করা
this.collection.each(function(task) {
var taskView = new TaskView({ model: task });
this.$el.append(taskView.render().el);
}, this);
return this;
},
addTask: function() {
var taskName = $('#new-task').val();
if (taskName) {
var newTask = new Task({ name: taskName });
this.collection.add(newTask); // নতুন টাস্ক যোগ হবে
$('#new-task').val(''); // ইনপুট ফিল্ড খালি হবে
}
}
});
// অ্যাপটি ইন্সট্যান্সিয়েট করা
var appView = new AppView();
5. ব্যাকবোন অ্যাপ্লিকেশনটি চালানো
এই কোডে আমরা একটি To-Do List অ্যাপ তৈরি করেছি যা Model, View, এবং Collection এর সঠিক ব্যবহার প্রদর্শন করে। ব্যবহারকারী নতুন টাস্ক যোগ করতে পারে এবং টাস্কের স্ট্যাটাস পরিবর্তন করতে পারে।
সারাংশ
এই অ্যাপ্লিকেশনে আমরা:
- Model ব্যবহার করে টাস্কের ডেটা তৈরি করেছি।
- Collection ব্যবহার করে টাস্কের একটি তালিকা তৈরি করেছি।
- View ব্যবহার করে টাস্কগুলোর জন্য HTML তৈরি এবং রেন্ডারিং করেছি।
এটি BackboneJS এর মূল ধারণাগুলি যেমন Model-View-Controller (MVC) এর সরল প্রয়োগ। আপনি এই অ্যাপটি আরও উন্নত করতে পারেবেন যেমন টাস্ক ডিলিট করা, সম্পূর্ণ করা বা সার্ভারে সংরক্ষণ করা ইত্যাদি।
Read more
