BackboneJS-এর Routing এবং View Rendering সুবিধা ব্যবহার করে আপনি উন্নত এবং ডায়নামিক ওয়েব অ্যাপ্লিকেশন তৈরি করতে পারেন। Complex Routing ব্যবহার করে আপনার অ্যাপ্লিকেশনে বিভিন্ন URL পাথের সাথে ভিউ এবং ডেটা ম্যানেজ করা সম্ভব হয়। একইভাবে, Multiple View Rendering ব্যবহার করে একাধিক ভিউ রেন্ডার করা যেতে পারে, যেটি সাধারণত বিভিন্ন বিভাগ বা স্ক্রিনের জন্য প্রয়োজনীয় হয়।
এই টিউটোরিয়ালে আমরা Complex Routing এবং Multiple View Rendering এর ওপর ফোকাস করবো।
1. Complex Routing in BackboneJS
BackboneJS-এর Router ক্লাস ব্যবহার করে আপনি বিভিন্ন URL পাথের জন্য হ্যান্ডলারের সংযোগ স্থাপন করতে পারেন। এতে client-side navigation পরিচালনা করা সম্ভব হয়, যেখানে পুরো পেজ রিলোড না হয়ে শুধু ভিউ আপডেট হয়।
Router Setup
Router সেটআপ করার জন্য, প্রথমে Backbone.Router কে এক্সটেন্ড করে একটি কাস্টম রাউটার তৈরি করতে হবে। এতে বিভিন্ন URL পাথ এবং এর সাথে সংশ্লিষ্ট অ্যাকশন (যেমন: ভিউ রেন্ডারিং) নির্ধারণ করা হয়।
var AppRouter = Backbone.Router.extend({
routes: {
'': 'home', // Home পেজ
'tasks': 'showTasks', // Task পেজ
'tasks/:id': 'showTaskDetail', // Task detail পেজ
'about': 'about' // About পেজ
},
// হোম পেজের জন্য হ্যান্ডলার
home: function() {
console.log('Home Page');
// ভিউ রেন্ডারিং
var homeView = new HomeView();
$('#app').html(homeView.render().el);
},
// টাস্কের তালিকা দেখানোর জন্য হ্যান্ডলার
showTasks: function() {
console.log('Tasks Page');
var tasksView = new TasksView();
$('#app').html(tasksView.render().el);
},
// নির্দিষ্ট টাস্কের বিস্তারিত দেখানোর জন্য হ্যান্ডলার
showTaskDetail: function(id) {
console.log('Task Detail Page for Task ' + id);
var taskView = new TaskDetailView({ taskId: id });
$('#app').html(taskView.render().el);
},
// অ্যাবাউট পেজের জন্য হ্যান্ডলার
about: function() {
console.log('About Page');
var aboutView = new AboutView();
$('#app').html(aboutView.render().el);
}
});
Router Start করা
আপনি যখন রাউটার তৈরি করবেন, তখন তাকে Backbone.history.start() দিয়ে ইনিশিয়ালাইজ করতে হবে, যাতে ব্রাউজার URL অনুসারে রাউটারের হ্যান্ডলার কার্যকর হয়।
var router = new AppRouter();
Backbone.history.start(); // হিস্ট্রি ম্যানেজমেন্ট চালু করা
এখন, আপনার অ্যাপ্লিকেশনটি ব্রাউজারের URL পরিবর্তন হলে সঠিক ভিউ রেন্ডার করবে এবং ইউজারের ইনপুট অনুযায়ী ডেটা আপডেট হবে।
2. Multiple View Rendering
ব্যাকবোনজেএস অ্যাপ্লিকেশনে একাধিক ভিউ রেন্ডার করা একটি সাধারণ প্রক্রিয়া। Multiple View Rendering ব্যবহার করা হলে, আপনি একে একে একাধিক ভিউ রেন্ডার করতে পারেন। যখন কোনো একটি ভিউ রেন্ডার করা হয়, তখন একই সাথে অন্য ভিউগুলোও এক্সিকিউট করা হয়।
Multiple Views Example
ধরা যাক, আমাদের একটি টাস্ক অ্যাপ্লিকেশন যেখানে দুটি ভিউ রয়েছে: একটিতে টাস্কের তালিকা দেখানো হবে এবং আরেকটিতে একটি নির্দিষ্ট টাস্কের বিস্তারিত। এই দুটি ভিউ আমরা একসাথে রেন্ডার করবো।
- TaskListView: টাস্কের তালিকা দেখাবে
- TaskDetailView: একটি নির্দিষ্ট টাস্কের বিস্তারিত দেখাবে
// Task List View
var TaskListView = Backbone.View.extend({
render: function() {
this.$el.html('<h3>Task List</h3><ul><li>Task 1</li><li>Task 2</li></ul>');
return this;
}
});
// Task Detail View
var TaskDetailView = Backbone.View.extend({
render: function() {
this.$el.html('<h3>Task Detail</h3><p>Details of Task</p>');
return this;
}
});
// Main App View
var AppView = Backbone.View.extend({
render: function() {
// Task list এবং Task detail একসাথে রেন্ডার
var taskListView = new TaskListView();
var taskDetailView = new TaskDetailView();
this.$el.append(taskListView.render().el);
this.$el.append(taskDetailView.render().el);
return this;
}
});
এখন AppView রেন্ডার করলে, টাস্ক তালিকা এবং টাস্ক বিস্তারিত একসাথে প্রদর্শিত হবে।
var appView = new AppView();
$('#app').html(appView.render().el);
এটি এমন একটি সিচুয়েশন যেখানে একাধিক ভিউ একই পেজে রেন্ডার করা হচ্ছে।
3. Managing Multiple Views with Backbone.js
একাধিক ভিউ পরিচালনা করা এবং তাদের মধ্যে সমন্বয় সাধন করার জন্য BackboneJS কিছু কার্যকর পদ্ধতি প্রদান করে।
View Composition (View Composition Pattern)
এটি একটি ডিজাইন প্যাটার্ন যেখানে একাধিক ছোট ভিউ নিয়ে একটি বড় ভিউ তৈরি করা হয়। আপনি ছোট ভিউগুলিকে মডুলারভাবে তৈরি করে তাদের একসাথে একটি কমপ্লেক্স ভিউ রেন্ডার করতে পারেন।
var ParentView = Backbone.View.extend({
initialize: function() {
this.subView1 = new SubView1();
this.subView2 = new SubView2();
},
render: function() {
this.$el.append(this.subView1.render().el);
this.$el.append(this.subView2.render().el);
return this;
}
});
এটি আপনার অ্যাপ্লিকেশনকে আরও সুসংগঠিত এবং মডুলার করে তোলে।
View Destruction
যখন কোনো ভিউ আর প্রয়োজন নেই, তখন তাকে ডেস্ট্রয় করা গুরুত্বপূর্ণ। ডেস্ট্রয় না করলে মেমরি লিক হতে পারে। ভিউ ডেস্ট্রয় করার জন্য remove() মেথড ব্যবহার করা হয়।
var taskView = new TaskView();
taskView.remove(); // ভিউ মুছে ফেলুন
এটি ভিউয়ের DOM এলিমেন্টকে সরিয়ে দেয় এবং ইভেন্ট লিসেনার বন্ধ করে দেয়।
4. Complex Routing with Dynamic Views
BackboneJS এ Complex Routing ব্যবহারের মাধ্যমে আপনি একটি ডায়নামিক এবং কাস্টমাইজড অ্যাপ্লিকেশন তৈরি করতে পারেন, যেখানে ডেটা এবং ভিউয়ের মধ্যে পরিবর্তন করা সম্ভব। আপনি URL এর মধ্যে প্যারামিটার পাস করে ডায়নামিক ভিউ রেন্ডার করতে পারেন।
Dynamic View Rendering Example
var DynamicView = Backbone.View.extend({
initialize: function(options) {
this.viewType = options.viewType || 'default';
},
render: function() {
if (this.viewType === 'list') {
this.$el.html('<h3>List View</h3>');
} else {
this.$el.html('<h3>Detail View</h3>');
}
return this;
}
});
var AppRouter = Backbone.Router.extend({
routes: {
'view/:type': 'renderDynamicView'
},
renderDynamicView: function(type) {
var dynamicView = new DynamicView({ viewType: type });
$('#app').html(dynamicView.render().el);
}
});
var router = new AppRouter();
Backbone.history.start();
এখানে view/:type রাউটটি ডায়নামিক প্যারামিটার হিসেবে type নেবে, এবং তার ওপর ভিত্তি করে ভিউ পরিবর্তন করবে।
সারাংশ
BackboneJS এ Complex Routing এবং Multiple View Rendering ব্যবহার করে আপনি শক্তিশালী, ডায়নামিক এবং স্কেলেবল অ্যাপ্লিকেশন তৈরি করতে পারেন। রাউটার ব্যবহারের মাধ্যমে URL পাথ এবং ভিউয়ের মধ্যে সমন্বয় ঘটানো সম্ভব এবং একাধিক ভিউ একই সময়ে রেন্ডার করা যেতে পারে। এই কৌশলগুলো ব্যবহার করে আপনি আরও উন্নত এবং ইন্টারঅ্যাকটিভ ওয়েব অ্যাপ্লিকেশন তৈরি করতে পারবেন।
Read more
