KnockoutJS তে Components এর ব্যবহার ওয়েব অ্যাপ্লিকেশনগুলিকে আরও মডুলার এবং পুনঃব্যবহারযোগ্য করতে সহায়তা করে। Components হলো এমন কাস্টম UI উপাদান যা নির্দিষ্ট ডেটা এবং বিহেভিয়র নিয়ে কাজ করে। KnockoutJS তে Components এর জীবনচক্র (lifecycle) বেশ কিছু মেথডের মাধ্যমে পরিচালিত হয়, যেগুলোর মাধ্যমে আপনি কম্পোনেন্ট তৈরি, আপডেট এবং ধ্বংস করার সময় নির্দিষ্ট কার্যক্রম চালাতে পারেন।
এই গাইডে, আমরা KnockoutJS এর Components Lifecycle Methods নিয়ে বিস্তারিত আলোচনা করব।
1. KnockoutJS Components এর ধারণা:
KnockoutJS এর Components আপনাকে view, model এবং behaviors গুলো আলাদা করতে সাহায্য করে। একটি কম্পোনেন্ট একটি কাস্টম টেমপ্লেট এবং একটি ভিউমডেল থেকে তৈরি হয়, যা পুরোপুরি স্বতন্ত্র এবং পুনরায় ব্যবহারযোগ্য।
Component তৈরি করার উদাহরণ:
<!-- Define the component template -->
<script type="text/html" id="myComponentTemplate">
<div>
<h2 data-bind="text: title"></h2>
<button data-bind="click: changeTitle">Change Title</button>
</div>
</script>
<!-- Define the main view -->
<div data-bind="component: { name: 'my-component', params: { title: title } }"></div>
<script>
// Define the component
ko.components.register('my-component', {
viewModel: function(params) {
this.title = ko.observable(params.title || 'Default Title');
this.changeTitle = function() {
this.title('New Title');
};
},
template: { element: 'myComponentTemplate' }
});
// Main view model
function AppViewModel() {
this.title = ko.observable('Initial Title');
}
// Apply Knockout bindings
ko.applyBindings(new AppViewModel());
</script>
এখানে, আমরা my-component নামের একটি কম্পোনেন্ট তৈরি করেছি যা একটি title প্রপার্টি গ্রহণ করে। কম্পোনেন্টের ভিতরে একটি button রয়েছে যা টাইটেল পরিবর্তন করবে।
2. Components Lifecycle Methods:
KnockoutJS কম্পোনেন্টের জন্য বেশ কিছু lifecycle methods প্রদান করে, যার মাধ্যমে আপনি কম্পোনেন্টের জীবনচক্রের বিভিন্ন স্তরে কার্যক্রম নিয়ন্ত্রণ করতে পারেন। এই মেথডগুলো আপনাকে কম্পোনেন্টের initialization, update, এবং destruction প্রক্রিয়া কাস্টমাইজ করতে সহায়তা করে।
KnockoutJS এ lifecycle methods সাধারণত viewModel এর অংশ হিসেবে কাজ করে এবং এই মেথডগুলি হল:
createdattachedbeforeRemoveremoved
a. created Method:
created মেথডটি কম্পোনেন্টের viewModel যখন প্রথম তৈরি হয়, তখন কল হয়। এটি আপনার কম্পোনেন্টের ইনিশিয়ালাইজেশন বা সেটআপ করার জন্য ব্যবহার করা যেতে পারে।
ko.components.register('my-component', {
viewModel: {
createViewModel: function(params, componentInfo) {
console.log('Component created');
return { title: ko.observable('Hello, world!') };
}
},
template: { element: 'myComponentTemplate' }
});
এখানে, createViewModel মেথডটি created এর সমতুল্য এবং এটি কম্পোনেন্টের viewModel ইনিশিয়ালাইজ করার জন্য ব্যবহার করা হয়।
b. attached Method:
attached মেথডটি তখন কল হয় যখন কম্পোনেন্টটি DOM এর সাথে যুক্ত হয়ে যায়। এটি আপনার কম্পোনেন্টের DOM উপাদানের সাথে কাজ করার জন্য উপযুক্ত সময়। যেমন, যদি আপনি কোনো DOM উপাদানের ওপর jQuery বা অন্যান্য লাইব্রেরি প্রয়োগ করতে চান, তবে এই মেথডটি ব্যবহার করতে পারেন।
ko.components.register('my-component', {
viewModel: {
attached: function() {
console.log('Component attached to the DOM');
}
},
template: { element: 'myComponentTemplate' }
});
এখানে, attached মেথডটি DOM এ যোগ হওয়া কম্পোনেন্টের পর কল হচ্ছে।
c. beforeRemove Method:
beforeRemove মেথডটি তখন কল হয় যখন কম্পোনেন্টটি DOM থেকে সরানোর জন্য প্রস্তুত হয়। আপনি এই মেথডে কোনো ফাইনাল কার্যক্রম সম্পন্ন করতে পারেন যেমন, ইভেন্ট লিসেনার রিমুভ বা ক্লিনআপ কাজ।
ko.components.register('my-component', {
viewModel: {
beforeRemove: function() {
console.log('Component is about to be removed');
}
},
template: { element: 'myComponentTemplate' }
});
এখানে, beforeRemove মেথডটি তখন কল হবে যখন কম্পোনেন্টটি DOM থেকে সরানো হবে।
d. removed Method:
removed মেথডটি কল হয় যখন কম্পোনেন্টটি DOM থেকে সম্পূর্ণভাবে সরানো হয়ে যায়। এটি কম্পোনেন্টের রিসোর্স বা ইভেন্ট হ্যান্ডলার ক্লিনআপের জন্য ব্যবহার করা যেতে পারে।
ko.components.register('my-component', {
viewModel: {
removed: function() {
console.log('Component has been removed');
}
},
template: { element: 'myComponentTemplate' }
});
এখানে, removed মেথডটি কল হবে যখন কম্পোনেন্টটি DOM থেকে সম্পূর্ণভাবে সরানো হবে।
3. Example: Using All Lifecycle Methods
এখানে একটি পূর্ণাঙ্গ উদাহরণ দেয়া হলো যেখানে সমস্ত lifecycle methods ব্যবহার করা হয়েছে।
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>KnockoutJS Component Lifecycle Example</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.5.1/knockout.js"></script>
</head>
<body>
<div data-bind="component: { name: 'my-component', params: {} }"></div>
<script type="text/html" id="myComponentTemplate">
<div>
<h2 data-bind="text: title"></h2>
<button data-bind="click: changeTitle">Change Title</button>
</div>
</script>
<script>
ko.components.register('my-component', {
viewModel: {
createViewModel: function(params, componentInfo) {
console.log('Component Created');
this.title = ko.observable('Initial Title');
this.changeTitle = function() {
this.title('New Title');
};
},
attached: function() {
console.log('Component Attached to the DOM');
},
beforeRemove: function() {
console.log('Component Before Remove');
},
removed: function() {
console.log('Component Removed');
}
},
template: { element: 'myComponentTemplate' }
});
ko.applyBindings();
</script>
</body>
</html>
ব্যাখ্যা:
createViewModel: কম্পোনেন্ট তৈরি হওয়ার সাথে সাথে এটি কল হবে, এবং এটি আমাদের কম্পোনেন্টের viewModel সেট করে।attached: কম্পোনেন্ট DOM এ যুক্ত হওয়ার পর কল হবে।beforeRemove: কম্পোনেন্ট DOM থেকে সরানোর আগে কল হবে।removed: কম্পোনেন্ট DOM থেকে সরানোর পর কল হবে।
KnockoutJS এর Component Lifecycle Methods আপনাকে কম্পোনেন্টের জীবনচক্রের বিভিন্ন পর্যায়ে কার্যক্রম সম্পাদন করার সুযোগ দেয়। আপনি কম্পোনেন্টের তৈরি, আপডেট, এবং ধ্বংসের সময় কাস্টম লজিক প্রয়োগ করতে পারেন। created, attached, beforeRemove, এবং removed এই মেথডগুলি ব্যবহার করে আপনি কম্পোনেন্টের কার্যক্রম আরও নিয়ন্ত্রণ করতে পারবেন এবং আপনার অ্যাপ্লিকেশনকে আরও মডুলার এবং কার্যকরী করে তুলতে পারবেন।
Read more
